Unable to attach a javascript eventListener to a newly created element

Question

Unable to attach a javascript eventListener to a newly created element

I've utilized JavaScript to generate 625

<div class="box"><div>

elements and now I'm trying to attach an event listener to each box. The boxes are being created successfully, however, the listener does not seem to be working. Below is my complete code. Any help or suggestions would be greatly appreciated. Thank you!

<!DOCTYPE html>
<html>
<head>
    <title>Number AI | Machine Learning Technology</title>
    <style>
        .box-container{
            display: grid;
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        }
        .box{
            width:10px;
            height:10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function initiateBox(){
            for (let i = 0; i < 625; i++) {
                let box = document.createElement("DIV");
                box.classList.add("box");
                document.querySelector('.box-container').appendChild(box);
            }
        };
        window.onload = initiateBox;
    </script>
</head>
    <body>
        <h2>Number AI</h2>
        <div class="box-container"></div>
        
        <script>
            document.querySelectorAll(".box").forEach(box =>{
                box.addEventListener("mouseover",function(){
                    box.style.backgroundColor = 'black';
                });
            });
        </script>
    </body>
</html>

javascript web event-handling

Answer 1

Answer №1

There are a few strategies that can be used to achieve this effect:

Utilize addEventListeners for both the 'load' and 'mouseover' events
Implement event delegation so that you can create the boxes at any point after the container is available
Consider using CSS hover as an alternative approach

Below is a sample script showcasing how event delegation can be implemented:

function initiateBox() {
  const container = document.querySelector('.box-container');
  for (let i = 0; i < 625; i++) {
    let box = document.createElement("div");
    box.classList.add("box");
    container.appendChild(box);
  }

  container.addEventListener("mouseover", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("box")) tgt.style.backgroundColor = 'black';
  });
};
window.addEventListener("load",initiateBox)

.box-container {
  display: grid;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.box {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  text-align: center;
}

<title>Number AI | Machine Learning Technologhy</title>

<h2>Number AI</h2>
<div class="box-container">
</div>

Answer 2

There are a few strategies that can be used to achieve this effect:

Utilize addEventListeners for both the 'load' and 'mouseover' events
Implement event delegation so that you can create the boxes at any point after the container is available
Consider using CSS hover as an alternative approach

Below is a sample script showcasing how event delegation can be implemented:

function initiateBox() {
  const container = document.querySelector('.box-container');
  for (let i = 0; i < 625; i++) {
    let box = document.createElement("div");
    box.classList.add("box");
    container.appendChild(box);
  }

  container.addEventListener("mouseover", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("box")) tgt.style.backgroundColor = 'black';
  });
};
window.addEventListener("load",initiateBox)

.box-container {
  display: grid;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.box {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  text-align: center;
}

<title>Number AI | Machine Learning Technologhy</title>

<h2>Number AI</h2>
<div class="box-container">
</div>

Answer 3

Answer №2

If you're looking for a straightforward solution, you can add the event listener to box creation like this:

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technology</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        box.addEventListener("mouseover", function() {
          box.style.backgroundColor = 'black';
        });
        document.querySelector('.box-container').appendChild(box);
      }
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

For a more efficient approach, consider using event delegation as suggested by @mplungjan. Here's an example of how you can implement it:

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technology</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      const boxContainer = document.querySelector('.box-container');
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        boxContainer.appendChild(box);
      }

      boxContainer.addEventListener("mouseover", function(event) {
        const target = event.target;
        if (target.classList.contains('box'))
          target.style.backgroundColor = 'black';
      });
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

Answer 4

If you're looking for a straightforward solution, you can add the event listener to box creation like this:

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technology</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        box.addEventListener("mouseover", function() {
          box.style.backgroundColor = 'black';
        });
        document.querySelector('.box-container').appendChild(box);
      }
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

For a more efficient approach, consider using event delegation as suggested by @mplungjan. Here's an example of how you can implement it:

<!DOCTYPE html>
<html>

<head>
  <title>Number AI | Machine Learning Technology</title>
  <style>
    .box-container {
      display: grid;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
      grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
    
    .box {
      width: 10px;
      height: 10px;
      border: 1px solid black;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function initiateBox() {
      const boxContainer = document.querySelector('.box-container');
      for (let i = 0; i < 625; i++) {
        let box = document.createElement("DIV");
        box.classList.add("box");
        boxContainer.appendChild(box);
      }

      boxContainer.addEventListener("mouseover", function(event) {
        const target = event.target;
        if (target.classList.contains('box'))
          target.style.backgroundColor = 'black';
      });
    };
    window.onload = initiateBox;
  </script>
</head>

<body>
  <h2>Number AI</h2>
  <div class="box-container"></div>
</body>

</html>

Answer 5

Answer №3

In my opinion, the issue lies in the order of script execution where the second script runs before the box elements are added to the document, resulting in not finding any boxes. To solve this problem, you can include the eventListener within the initiateBox function that you have created:

function initiateBox(){
        for (let i = 0; i < 625; i++) {
            let box = document.createElement("DIV");
            box.classList.add("box");
            box.addEventListener("mouseover",function(){
                box.style.backgroundColor = 'black';
            });
            document.querySelector('.box-container').appendChild(box);
        }
    };
    window.onload = initiateBox;

If the intention is to change the background color on mouseover, using CSS hover would be a more efficient approach.

Answer 6

In my opinion, the issue lies in the order of script execution where the second script runs before the box elements are added to the document, resulting in not finding any boxes. To solve this problem, you can include the eventListener within the initiateBox function that you have created:

function initiateBox(){
        for (let i = 0; i < 625; i++) {
            let box = document.createElement("DIV");
            box.classList.add("box");
            box.addEventListener("mouseover",function(){
                box.style.backgroundColor = 'black';
            });
            document.querySelector('.box-container').appendChild(box);
        }
    };
    window.onload = initiateBox;

If the intention is to change the background color on mouseover, using CSS hover would be a more efficient approach.

Unable to attach a javascript eventListener to a newly created element

Answer №1

Answer №2

Answer №3

Similar questions

Tips on employing the sendkeys function in selenium webdriverjs through promise chaining

Enhancing a React modal to enable user input for updating state variables

Can a custom function be executed using setTimeout in Node.js?

Leveraging ng-switch with ng-repeat in AngularJS to dynamically apply HTML based on conditions

Ways to create a table with columns from various fields obtained through an API call

What is the best way to access nested JSON data in Vue.js code demonstrated here?

Scrolling to does not function properly with Material UI tabs

Touch interaction operates differently than mouse movement

Error parsing data in the $.ajaxSetup() function of JQuery

Php/JavaScript Error: Identifier Not Found

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

Having trouble implementing the center edge effect in this CSS design

Despite passing JSLint, an unexpected end of input still occurred

Using AJAX to submit a PHP form without refreshing the page

Success is returned as AJAX error

What is preventing the clickHandler from properly updating the state?

Leveraging Gatsbyjs to Integrate GraphQL Data with Material UI Library

Improved method for retrieving a subtask within a personalized grunt task?

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

Eliminate the Jquery Combobox