How to use onclick in an external javascript file

Question

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.

YOu cant right like this - onclick='displayDate()'; in js file — Butani Vijay
– Butani Vijay, Commented Apr 19, 2014 at 9:15

Maurice Perry · Accepted Answer · 2014-04-19 09:18:05Z

5

This 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;
}

answered Apr 19, 2014 at 9:18

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jahan Over a year ago

Is it necessary to use window.onload ?

Maurice Perry Over a year ago

Yes it is, because if you set the handler directly in the script, the markup may be incomplete, and the button may not exist. But I just noticed the jquery tag in your question; if you're using jquery, it can be a little simpler.

jahan Over a year ago

I am very new to Javascript and do not know anything about jquery. Should I try it after studying jquery ? I am editing tags.

Maurice Perry Over a year ago

My opinion is that you should start with learning Javascript, then learn jquery.

jahan Over a year ago

Yes sir, I am doing the same. But for the above problem ,should I take the help of jquery?

|

Jay M · Accepted Answer · 2014-04-19 09:14:57Z

1

<!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();
}

answered Apr 19, 2014 at 9:14

Jay M

1031 gold badge1 silver badge9 bronze badges

2 Comments

lennon626 Over a year ago

Just out of curiosity, why is this answer being downvoted? Is it because the click event shouldn't be in the HTML? Because the code seems to work just fine.

Jay M Over a year ago

I can't understand why the answer is downvoted either !! anyway I hope it helped.

Collectives™ on Stack Overflow

How to use onclick in an external javascript file

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related