This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 9 years ago.
what on earth is wrong with this?
http://jsfiddle.net/sVT54/
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
JSFiddle wraps your javascript code in the onLoad call of the page by default so myFunction is defined only in that function's scope. Change to No wrap - in <head> and your code will run as expected.
http://jsfiddle.net/sVT54/3/
include your JavaScript in
<Script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
</script>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
html file
<img id="mon" class="week" src="image/week/unmon.png" onclick="mon()">
<img id="tue" class="week" src="image/week/untue.png" onclick="tue()">
It exists like this.
js file
var d=new Date();
console.log(d.getDay());
if(d.getDay()=="1"){
week="mon";
document.getElementById("mon") = "image/week/check_mon.png";
document.getElementById("tue").src = "image/week/un_tue.png";
}else if(d.getDay()=="2"){
week="tue";
document.getElementById("mon").src = "image/week/un_mon.png";
document.getElementById("tue").src = "image/week/check_tue.png";
}
I did this.
And run it
script.js:13 Uncaught TypeError: Cannot set property'src' of null at
script.js:13
An error occurs.
How do I set it up?
Make sure you only call that script after the page is loaded! Otherwise, the script will try to get the element that is not yet present in DOM
Please refer to this answer: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it
<!doctype html>
<html>
<head>
</head>
<body>
Your HTML here
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I wrote a simple code to learn Eventhandling in JavaScript but when I click on the button "Click" the function hello() does not work, why?
html file:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<button id="click">Click</button>
</body>
</html>
JavaScript file:
document.getElementById("click").onclick = hello;
function hello() {
alert("You Clicked!");
}
You are calling the script before the dom is generated. experiment to call the right before the tag.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am new to HTML and JavaScript. I have put tag in head, but it is not working. Its code is given. However, it works when I place it in the body section. Why it is not working inside the tag?
<head>
<script>
document.getElementById("demo").innerHTML = "Hello, World!";
<script>
</head>
<body>
<p id = "demo"> </p>
</body>
It does, but your script is executed before your DOM is loaded properly. Use
window.onload = function() {
document.getElementById("demo").innerHTML = "Hello, World!";
}
Also it's possible to use the onload attribute:
<body onload="jsFunction()"></body>
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 6 years ago.
This works:
<html>
<script type="text/javascript">
function lala() {
console.log("lala");
}
</script>
<body>
<button onclick="lala()">lala</button>
</body>
</html>
But having that in jsfiddle works not:
<button onclick="lala()">lala</button>
function lala() {
console.log("lala");
}
https://jsfiddle.net/clankill3r/715kha38/
Uncaught ReferenceError: lala is not defined
I saw some old answers on stackoverflow regarding this problem but those seem to be invalid those days.
Please change Load type in java script section select
No wrap - in <head>
This question already has answers here:
When do I need to specify the JavaScript protocol?
(5 answers)
Closed 8 years ago.
I have this code:
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<button onclick="javascript:myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
if I change <button onclick="javascript:myFunction()">Click me</button> by
<button onclick="myFunction()">Click me</button>
my code runs normally.
Is that a difference between onclick="javascript:myFunction()" and onclick="myFunction()" ?
That's the javascript: pseudo-protocol, that has got lost. It's used when you have Javascript in an URL, for example:
Hi
An event attribute doesn't support the :javascript protocol, so it doesn't work there. However, it happens to become the same syntax as a label in Javascript, so the code actually still works eventhough the protocol is in the wrong place.
So, in conclusion, the :javascript shouldn't be there, and it's just plain luck that it still happens to work when it is.