I got the following code on w3school :
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
This is working well. Now for the sake of practice, I want want to do it by an external js file. My codes are as follows Html :
<!DOCTYPE html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button >Try it</button>
<p id="demo"></p>
<script src="function.js"></script>
</body>
</html>
My js file:
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
onclick='displayDate()';
But above code is not working. What should I do for this.
I got the following code on w3school :
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
This is working well. Now for the sake of practice, I want want to do it by an external js file. My codes are as follows Html :
<!DOCTYPE html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button >Try it</button>
<p id="demo"></p>
<script src="function.js"></script>
</body>
</html>
My js file:
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
onclick='displayDate()';
But above code is not working. What should I do for this.
Share Improve this question edited Apr 19, 2014 at 9:27 jahan asked Apr 19, 2014 at 9:11 jahanjahan 5211 gold badge4 silver badges16 bronze badges 3- YOu cant right like this - onclick='displayDate()'; in js file – Butani Vijay Commented Apr 19, 2014 at 9:15
- Thanks.. What should I do for this.. – jahan Commented Apr 19, 2014 at 9:21
- CHeckout answer given by @Maurice – Butani Vijay Commented Apr 19, 2014 at 10:47
2 Answers
Reset to default 5This is often done with an ID on the button. To ensure the DOM is loaded when the script is executed, it is done in a load handler.
html:
<!DOCTYPE html>
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myButton">Try it</button>
<p id="demo"></p>
</body>
</html>
function.js:
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
window.onload = function() {
var btn = document.getElementById("myButton");
btn.onclick = displayDate;
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="try it" onclick='displayDate()' >Try it</button>
<p id="demo"></p>
<script src="function.js"></script>
</body>
</html>
js file
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}