JavaScript click addEventListener not working on my code

Question

I am trying to get a JavaScript listener to work but nothing changes.

Here is the full code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #trigger {
      padding: 20px;
      background-color: red;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }

    #box {
      padding: 20px;
      background-color: green;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="trigger">Click Here</div>
  <div id="box">
    content should change
  </div>
  <script type="text/javascript">
    document.addEventListener("click", () => {
      document.getElementById("trigger"), () => {
        document.getElementById("box").innerHTML = "New Box Text";
      }
    });
  </script>
</body>
</html>

I know I can do this using jQuery, but I want to do it with just pure, vanilla JavaScript.

When I click on #trigger, #box text is not changing. What I'm I doing wrong?

you need something like document.querySelector('#trigger').onclick, but my point is that you should target an element. — Progs
– Progs, Commented Aug 2, 2018 at 21:52
@B.J.A.A. Using addEventListener is a better practice than onclick — charlietfl
– charlietfl, Commented Aug 2, 2018 at 21:53

Rick · Accepted Answer · 2018-08-02 21:58:03Z

In order to run your code only, when the DOM completely loaded and parsed, add an evenet listener under the DOMContentLoaded event, then use querySelector to select the element with the #trigger id, then add a click event listener to it and use querySelector again to select the element with #box id and modify its .innerHTML accordingly:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector("#trigger").addEventListener('click', () => {
    document.querySelector("#box").innerHTML = "New Box Text";
  });
});

The great thing about using querySelector and also querySelectorAll is that they provide a similar functionality compared to jQuery, when selecting elements.

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #trigger {
      padding: 20px;
      background-color: red;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
    
    #box {
      padding: 20px;
      background-color: green;
      border: 1px solid white;
      width: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="trigger">Click Here</div>
  <div id="box">
    content should change
  </div>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector("#trigger").addEventListener('click', () => {
        document.querySelector("#box").innerHTML = "New Box Text";
      });
    });
  </script>
</body>
</html>

ggorlen · Accepted Answer · 2018-08-02 21:53:00Z

Add the listener to the box element rather than the entire page:

document.getElementById("trigger").addEventListener("click", () =>
  document.getElementById("box").innerHTML = "New Box Text"
);

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <style type="text/css">
    #trigger {
        padding: 20px;
        background-color: red;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }

    #box {
        padding: 20px;
        background-color: green;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }
  </style>

</head>

<body>

<div id="trigger">Click Here</div>
<div id="box">
    content should change
</div>

</body>
</html>

Collectives™ on Stack Overflow

JavaScript click addEventListener not working on my code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related