Style an element when it is clicked

Question

Even before I click the button the h1 tagged element comes yellow what should I do to fix it? Just want to make them yellow when I click on the button.

<html>
<head></head>
<body>  

<h1>Hello</h1>

<h2>World</h2>

<h1>test</h1>


<button id="button">click</button>
<script>
    var x = document.getElementById("button");

    x.addEventListener("onclick",change());

    function change(){
        var myNodes = document.getElementsByTagName("h1");

        for (var i = 0; i < myNodes.length ; i++) {
            myNodes[i].style.backgroundColor  = "yellow";
        }
    }

</script>

</body>
</html>

score 1 · Answer 1 · edited Mar 09 '21 at 08:57

1

addEventListner accepts a function, rather than the return value to a function. Your change() is calling the function change, and the return value is being passed to addEventListener.

<script>
        const button = document.getElementById("button");
    
        button.addEventListener("click", change);
    
        function change(){
            const myNodes = document.getElementsByTagName("h1");
            for (let i = 0; i < myNodes.length ; i++) {
                myNodes[i].style.backgroundColor  = "yellow";
            }
        }
    </script>

There are easier and more graceful ways of accomplishing this, but that is beyond the scope of this answer.

edited Mar 09 '21 at 08:57

Lee Goddard

10,680
4
46
63

answered Dec 16 '17 at 18:13

zabusa

2,520
21
25

1

Code only answers aren't very useful without an explanation of what was changed and why – charlietfl Dec 16 '17 at 18:14
Especially when there's a linked duplicate that does a better job – Andrew Li Dec 16 '17 at 18:15
@charlietfl its not because addeventlistner fires on pageload – zabusa Dec 16 '17 at 18:26
It's not me that needs the explanation ... it's anyone that reads the answer – charlietfl Dec 16 '17 at 18:27

score 0 · Accepted Answer · answered Dec 16 '17 at 18:16

Two issues in your js snippet first in x.addEventListener("onclick",change());

the event should be click instead of onclick,secondly change() will immediately call the function , but x.addEventListener("click",change) will trigger the function only when it is clicked

var x = document.getElementById("button");

x.addEventListener("click", change);

function change() {
  var myNodes = document.getElementsByTagName("h1");

  for (var i = 0; i < myNodes.length; i++) {
    myNodes[i].style.backgroundColor = "yellow";
  }
}

<h1>Hello </h1>

<h2>World</h2>

<h1>test</h1>


<button id="button">click</button>

thank you, it worked. How can I learn details like that? Is there a page that I can read and practice? — alkanschtein, Dec 16 '17 at 19:07

Style an element when it is clicked

2 Answers2