Javascript - Adding event listeners to all items in an array

Question

I'm having trouble getting an event listener to apply to all items in an array I've created. I've looked at lots of other related posts here, but none seem to cover my precise situation.

I know the for loop is working because I'm logging it out to the console and can see each iteration pop up. I can even see in the console that the event listener has been applied to each iteration, but won't fire when actually mousing over the element on the page.

Any clues on what I might be missing? The complete code is below.

<head>
    <title>Test Page</title>
</head>

<style>
    .red-text {
        color: red;
        font-size: 75px;
        transition: 4s;
        font-family: Times;
    }

    .new-header {
        color: blue;
        font-size: 100px;
        transition: 3s;
        font-style: bold;
    }
</style>

<body>
    <h1>Welcome</h1>
    <p>This is the first paragraph</p>
    <p>Here is the second paragraph</p>
    <p>And this is the final paragraph</p>

    <script>


        var h = document.querySelector("h1");
        var p = document.querySelectorAll("p");

        var changeHeader = function() {
            h.className = h.className + " new-header";
        }

        var addRedClass = function() {
            p.className = p.className + " red-text";
        }

        h.addEventListener("mouseover", changeHeader); 

        for(var i = 0; i < p.length; i += 1) {
            console.log(p[i]);
            p[i].addEventListener("mouseover", addRedClass);
        }

    </script>

</body>

Again, each element in the array is being targeted, and I can verify that the listener is being applied, but it will not fire on mouse over.

Thanks in advance for any advice!

p might not have dimensions via CSS in the DOM that allow it to be mouseovered perhaps. — serraosays
– serraosays, Commented Aug 31, 2016 at 15:03

KevBot · Accepted Answer · 2016-08-31 15:09:03Z

5

You need to have the right scope on the addRedClass function.

var addRedClass = function() {
    this.className = this.className + " red-text";
};

By using this.className, you are referencing the <p> tag that was moused over.

The reason you don't need need to use this in the changeHeader function is because the variable h only contains the header node. The variable p however, contains a nodeList which is not a single reference to a <p> node. Therefore, when the addEventListener fires, it will pass the <p> tag you mousedover to the addRedClass as the scope. That is why this works to change the className.

edited Aug 31, 2016 at 15:09

answered Aug 31, 2016 at 15:02

KevBot

19k5 gold badges54 silver badges71 bronze badges

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

1 Comment

greatdain Over a year ago

Brilliant! This fixed it perfectly. Thanks for the insight!

Quentin · Accepted Answer · 2016-08-31 15:01:25Z

3

p[i].addEventListener("mouseover", addRedClass);

So whenever any of the elements in p is moused over, the addRedClass function is called. This is fine.

Now let's look at that function:

p.className = p.className + " red-text";

You modify the className of p.

Which is the non-live NodeList of element objects.

It doesn't have a className property (until you create it).

Presumably want to use to this.className or loop over p and use p[i].className repeatedly.

answered Aug 31, 2016 at 15:01

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Javascript - Adding event listeners to all items in an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related