Vanilla JS not this on click event

user_12506193 0
Viewed 487

I want to style the colour of the h1 elements to black that are not "this" on click. So it will turn the h1 red on click and not this to black.

<script>
window.addEventListener('load', function() {
    var h1Loop = document.querySelectorAll("h1");

    for(var i = 0; i < h1Loop.length; i++) {
        h1Loop[i].addEventListener("click", function () {
            this.style.color = "red";
            not this.style.color = "black"
        });
    }
});
</script>

<h1>Test</h1>
<h1>Testing</h1>
<h1>Test One</h1>
html javascript
4 Answers

You can modify the event listener like this.

window.addEventListener('load', function() {

var h1Loop = document.querySelectorAll("h1");

for(var i = 0; i < h1Loop.length; i++) {
    h1Loop[i].addEventListener("click", function () {
        for(var j = 0; j < h1Loop.length; j++) {// all header elements are changed to black
              h1Loop[i].style.color = "black"
        }
        this.style.color = "red";//clicked header element is changed to red
    });
}

});

when a particular header element is clicked, first the colour of all header elements are changed to black. Then the colour of clicked element is changed to Red. In this way, the clicked element alone appears in red. Hope this helps.

user_119566210

you should use the event inside the click callback:

        h1Loop[i].addEventListener("click", function (e) {
            h1Loop.forEach(el => el.style.color="black");
            this.style.color = "red";
        });
Admin1

I think below code will handle your request.

        h1Loop[i].addEventListener("click", function (e) {
            // Make all black
            h1Loop.forEach(h1 => {
                 h1.style.color = "black";
            });
            // Make target h1 color red
            e.target.style.color = "red";

        });
user_130048610

Loop over the elements inside the event handler:

var h1Loop = document.querySelectorAll("h1");

for(var i = 0; i < h1Loop.length; i++) {
    h1Loop[i].addEventListener("click", function () {
        for(var j = 0; j < h1Loop.length; j++) {
           h1Loop[j].style.color = (h1Loop[j] === this) ? "red" : "black";
        }
    });
}
user_3184930
Related