Question

Adding multiple events in an array of elements using 'querySelectorALL' in JavaScript?

In my HTML, i already have three Divs.

In my script section, this is my code:
for (var i = 0; i < box.length; i++) {
box[i].addEventListener("mouseover", function () {
box.style.backgroundColor = "blue";
});
}
box.addEventListener("mouseout", function () {
box[i].style.backgroundColor = "pink";
});

Ok so based on that code snippet, am trying to add a mouseover and mouseout events in each element so that when I hover on and off each div they change color. But it doesn't seem to work. Any advice on how I can make this work?

Answer 1

The issue with your code is that you are trying to set the background color of the entire box element when you should only be changing the background color of the current element that is being hovered over or moused out.

To fix this, you can modify your code to use the this keyword inside the event listener function to refer to the current element that is being hovered over or moused out. Here's the updated code:

// Get all the box elements

var box = document.querySelectorAll(".box");

// Loop through each box element and add mouseover and mouseout event listeners

for (var i = 0; i < box.length; i++) {

box[i].addEventListener("mouseover", function () {

this.style.backgroundColor = "blue";

});

box[i].addEventListener("mouseout", function () {

this.style.backgroundColor = "pink";

});

}

In this updated code, we are using the this keyword to refer to the current element that is being hovered over or moused out. We are also setting the background color of the current element using the style.backgroundColor property, which ensures that only the current element's background color is changed.

Note: Make sure that your HTML elements have the class box in order for the querySelectorAll method to select them correctly.

Answer 2

It looks like there are a couple of issues with your code. Here are some suggestions on how to fix them:

Use querySelectorAll to select all the div elements:

javascript

var box = document.querySelectorAll("div");

In your loop, you need to refer to the current element using this:

javascript

for (var i = 0; i < box.length; i++) {

box[i].addEventListener("mouseover", function () {

this.style.backgroundColor = "blue";

});

box[i].addEventListener("mouseout", function () {

this.style.backgroundColor = "pink";

});

}

In the mouseover and mouseout event listeners, you need to refer to the current element using this. Also, you need to set the backgroundColor property of the current element (this), not the box variable.

Putting it all together, your updated code should look like this:

javascript

var box = document.querySelectorAll("div");

for (var i = 0; i < box.length; i++) {

box[i].addEventListener("mouseover", function () {

this.style.backgroundColor = "blue";

});

box[i].addEventListener("mouseout", function () {

this.style.backgroundColor = "pink";

});

}

With these changes, you should be able to hover over and off each div to change its background color.