Javascript - EventListener not working in external js-file

Question

I am trying to remove the onClick tags in my html and add an EventListener to my external js-file instead, but can't seem to get it to work.

The following lines work:

<input type="text" name="text" id="test">
<input type="submit" name="send" value="Skicka" id="klick" onclick="skriv()">

When removing onclick and adding the following to my javascript, it does not :

document.getElementById("klick").addEventListener("click", skriv);

function skriv() {

    var input = document.getElementById("test").value;
    alert("Hello" + " " + input);

}

Entire html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hello.css">
    <title>
        Multimedia
    </title>
    </head>
    <body>
        <script type="text/javascript" src="hello.js"></script>
        <div>
            <form>
                <p>Skriv ditt namn:</p><br>
                <input type="text" name="text" id="test">
                <input type="submit" name="send" value="Skicka" id="klick">
            </form>
            <p class="lol">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here`
            </p>
        </div>
    </body>
</html>

Vilas Kumkar · Accepted Answer · 2017-02-20 10:32:20Z

11

you are missing window.onload, checkout demo with separate script.js file

window.onload = function () {
  var buttonElement = document.getElementById("klick");
  var inputElement = document.getElementById('test');


  if (buttonElement) {
    buttonElement.addEventListener('click', skriv);
  }

  function skriv() {
    var input = inputElement.value;
    alert("Hello " + input);
  }
}

answered Feb 20, 2017 at 10:32

Vilas Kumkar

1,4009 silver badges18 bronze badges

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

1 Comment

bytise Over a year ago

Yes, this works! Thanks Vilas! Good solution.I used it in a php form to call an external js file. The event listeners would not work until I did the above.

Roko C. Buljan · Accepted Answer · 2017-02-20 10:19:54Z

2

Place your <script> tag right before your closing </body> tag.
Or use another way to detect your DOM is ready.

<body>


  <div>
    <form>
      <p>Skriv ditt namn:</p><br>
      <input type="text" name="text" id="test">
      <input type="submit" name="send" value="Skicka" id="klick">
    </form>
    <p class="lol">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here`
    </p>
  </div>



  <script> // Or external JS URL
    document.getElementById("klick").addEventListener("click", skriv);

    function skriv() {

      var input = document.getElementById("test").value;
      alert("Hello" + " " + input);

    }
  </script>

</body>

answered Feb 20, 2017 at 10:19

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

sbsatter · Accepted Answer · 2018-04-19 19:54:02Z

0

It does not work because when the script is loaded, there are no elements to be found on which it can bind the event.

Solutions.

Move your script to the bottom of the body tag.

or you can Use Delegate

   document.addEventListener("click", function(e) {
       for (var target=e.target; target && target!=this; target=target.parentNode) {
       // loop parent nodes from the target to the delegation node
           if (target.matches(<selector>)) {
               handler.call(target, e);
               break;
           }
       }
   }, false);

edited Apr 19, 2018 at 19:54

sbsatter

5914 silver badges26 bronze badges

answered Feb 20, 2017 at 10:23

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

Comments

Ahmad A.A · Accepted Answer · 2020-04-20 04:36:41Z

0

I would propose just to add the following right before the closing tag:

<script> window.onload=startListen(); </script>

On the first line of your .js-file, you add function startListen(){ * }

You replace the * with all your eventListeners you want.

edited Apr 20, 2020 at 4:36

Ahmad A.A

7497 silver badges15 bronze badges

answered Apr 19, 2020 at 20:42

Gunner64

1

Collectives™ on Stack Overflow

Javascript - EventListener not working in external js-file

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related