Is it possible to load js file on some event like mouseover or click?
I try to load a whole js file not a specific function.
This example loads the specified js file on onClick() event of button
<button onclick="myFunction()">Click me</button>
<script type="text/javascript">
function myFunction(){
var file = document.createElement("script");
file.setAttribute("type", "text/javascript");
file.setAttribute("src", "js/js_file.js");
document.getElementsByTagName("head")[0].appendChild(file);
}
</script>
Similarly, you can also load the js on onMouseOver() event of the button or any other HTML element.
Example using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myButton').mouseenter(function() {
$("head").append($("<script />").prop("type", "text/javascript").prop("src", "http://code.jquery.com/jquery.mobile-1.2.0.js"));
});
});
</script>
</head>
<body>
<input type="button" id="myButton" value="CLICK" />
</body>
</html>
Related
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
So currently I want to have my javascript in an attached JS file instead of using the 'OnClick' function attached to HTML objects. So far I've got:
<html>
<head>
</head>
<body>
<h1 id = '5' class = ''>6</h1>
<button id = '7' class = ''>8</button>
<script src = 'js/9.js'></script>
</body>
</html>
But unfortunately, I can't quite get the redirect going from clicking the button. It should have this source
document.getElementById('7').onclick = function () {
and then redirecting to a different page. Any tips on how I can improve this?
Please use strings as ID. I know you can now use numbers but it is not recommended
Use the load event handler
You MAY be submitting the page to itself when not giving the button a type so return false or preventDefault
what's with the spacing around = in the attributes? Not necessary nor recommended.
Like this
<html>
<head>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
window.onload=function() {
document.getElementById("seven").onclick = function () {
location.replace("page2.html"); // or just location="page2.html";
return false;
}
}
Using jQuery it would be
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
$(function() {
$("#seven").on("click",function (e) {
e.preventDefault();
location.replace("page2.html"); // or just location="page2.html";
});
});
LASTLY you do not need script at all:
<form action="page2.html">
<button type="submit" id="seven" class="">8</button>
</form>
I have this java script function:
function copyToClipboardCrossbrowser2(text) {
alert(text);
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: text
});
}
when I make path: js/ZeroClipboard.swf , google chrome tells me that this file is not exist. but when I put the / it doesn't tell me that it is not working. so the swf is installed.
the alter is printing the correct value. but the copy is not working.
why please?
I already include these:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.zclip.js"></script>
Note
In another project, I am working with this library, which means my flash player is working
This is the html of the button that has the id Button
<button type="button" id="Button1" class="copyToBtn" onclick="copyToClipboardCrossbrowser2('00971509396782',this);" title="Copy">
Copy Phone Number</button>
I am working asp.net
and this is the code of the button
<button type="button" id="Button1" class="copyToBtn" type="button" onclick="copyToClipboardCrossbrowser2('<%#Eval("Telephone")%>',this);"
title="Copy">
Copy Phone Number</button>
The id is not changing that is why I gave you the html
js fiddle:
http://jsfiddle.net/6HPuC/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<title>Test</title>
</head>
<script>
$(function() {
$("#Button1").zclip({
path: 'http://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/ZeroClipboard.swf',
copy: function() {
return $(this).data("copy");
}
});
});
</script>
</head>
<body>
<button type="button" data-copy="<%#Eval('Telephone')%>" id="Button1" class="copyToBtn" title="Copy">Copy Phone Number</button>
</body>
</html>
In your code you have used on button click event to bind zClip with button which is Wrong.
When you attach ZClip to button it will automatically handles OnClick event, no need to write on button event
Below is your modified code
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').zclip({
path: '/js/ZeroClipboard.swf',
copy: $('#Button1').attr('data-copy')
});
});
</script>
And button event will be as below:
<button type="button" id="Button1" class="copyToBtn" data-copy="<%#Eval('Telephone')%>" title="Copy">
Copy Phone Number</button>
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...