CODEWITHSUNDEEP
javascriptdomaddeventlistener
user10044012
user10044012

Reputation:

JavaScript click addEventListener not working on my code

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?

Upvotes: 2

Views: 3131

Answers (2)

Rick
Rick

Reputation: 4124

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>

Upvotes: 3

ggorlen
ggorlen

Reputation: 57414

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>

Upvotes: 1

Related Questions