单击时为元素设置样式[重复]答案

【问题标题】：Style an element when it is clicked [duplicate]单击时为元素设置样式[重复]
【发布时间】：2017-12-16 18:10:49
【问题描述】：

即使在我单击按钮之前，带有 h1 标记的元素也会变黄，我应该怎么做才能修复它？当我点击按钮时，只想让它们变黄。

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

【问题讨论】：

标签： javascript html css dom-events

【解决方案1】：

addEventListner 接受一个函数，而不是函数的返回值。你的change()正在调用函数change，返回值被传递给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>

有更简单、更优雅的方法可以实现这一点，但这超出了这个答案的范围。

【讨论】：

如果不解释更改的内容和原因，仅代码的答案并不是很有用
特别是当链接副本做得更好时
@charlietfl 这不是因为 addeventlistner 在页面加载时触发
需要解释的不是我……阅读答案的人是任何人

【解决方案2】：

jssn-p 中的两个问题首先在x.addEventListener("onclick",change()); 中

事件应该是click而不是onclick，其次change()会立即调用函数，而x.addEventListener("click",change)只有被点击才会触发函数

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>

【讨论】：

谢谢，它成功了。我怎样才能了解这样的细节？有可以阅读和练习的页面吗？