Problem with attaching a click event to a button using a external JavaScript file

Question

I am trying to attach a click or onlclick event to a button element through external JavaScript but it is not working. Can anyone help? I am writing my code below for reference. Html part:-

<head>
<script src="script.js"></script>
</head>
<body>
    <button id="myBtn">ClickMe</button>
    <p id="demo"></p>    
</body>

JS code :-

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Does this answer your question? [javascript code not work in HEAD tag](https://stackoverflow.com/questions/15675745/javascript-code-not-work-in-head-tag) — N.J.Dawson, Jun 16 '20 at 14:43
Your issue is related to loader of the DOM loading. See the above - the fact your code is external is not a factor here. — N.J.Dawson, Jun 16 '20 at 14:44
Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Jun 16 '20 at 14:45

Nikola Lukic · Answer 1 · 2020-06-16T15:47:52.727

1

You need to wait DOM loading elements.

Def script after html tags. Solution 1:

<head>
</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
  <!--Put script tag in end of body-->
  <script src="script.js"></script>
</body>

Other solution use onload function . In onload call DOM is loaded and ready for access. Solution 2:

// SCRIPT
window.onload = function() {

 function myFunction() {
   document.getElementById("demo").innerHTML = "Hello World";
 }

 document.getElementById("myBtn").addEventListener("click", myFunction);

};

<script src="script.js"></script>

</head>
<body>
  <button id="myBtn">ClickMe</button>
  <p id="demo"></p>    
</body>

Try it :

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

window.onload = function() {
  document.getElementById("myBtn").addEventListener("click", myFunction);
}

 
 <button id="myBtn">ClickMe</button>
 <p id="demo"></p>

edited Jun 16 '20 at 15:47

answered Jun 16 '20 at 14:43

Nikola Lukic

3,277
5
33
57

Solution 1 isn't valid HTML when it's outside of the body - it would be fine if you put it within the body, at the end. – N.J.Dawson Jun 16 '20 at 14:44
Is not necessary... Its is a still in – Nikola Lukic Jun 16 '20 at 14:50
Implementing things to standard is entirely necessary. The difference to you is moving up a line and it would actually make your answer correct to the widely accepted standards. Unsure why the push back here. – N.J.Dawson Jun 16 '20 at 14:58

Zaid Aly · Answer 2 · 2020-06-16T14:47:44.937

-1

Add the script tag after the HTML It will surely solve your problem

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

<html>
<head>
</head>
<body>
    <button id="myBtn">ClickMe</button>
    <p id="demo"></p>    
    
    <script src="script.js"></script>    
</body>
</html>

edited Jun 16 '20 at 14:47

answered Jun 16 '20 at 14:44

Zaid Aly

139
13

This answer is incorrect - it doesn't work because the load order around the DOM in a conventional web page. It only works in the snippet viewer as the load order isn't emulated correctly. – N.J.Dawson Jun 16 '20 at 14:47
My bad. He put the script before the HTML code and the HTML portion was not loaded properly. – Zaid Aly Jun 16 '20 at 14:57
The edit looks good, welcome to Stack Overflow! +1. – N.J.Dawson Jun 16 '20 at 15:00

Problem with attaching a click event to a button using a external JavaScript file

2 Answers2