javascript - Vanilla JS不是单击事件

我想将h1元素的颜色设置为黑色，而不是单击“此”。因此，它将在单击时将h1变为红色，而不是变为黑色。

<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>

最佳答案

您可以像这样修改事件监听器。

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
    });
}

});

单击特定的标题元素时，首先所有标题元素的颜色都将变为黑色。然后，单击元素的颜色更改为红色。这样，单击的元素将单独显示为红色。希望这可以帮助。