Question

假设我有一个按钮，我想使用JavaScript来更改文本和更改文本的颜色。我知道我可以使用下面粘贴的代码来完成它。对我来说这似乎是多余的。如果没有写2行，是否有更好/更短的方法来实现这一目标？也许我想在点击元素上做两件以上的事情。

<p id="p">What color is an egg?</p>
    <button id="b">click for answer</button>

    <script>
    document.getElementById("b").addEventListener("click", function(){document.getElementById("p").innerHTML= "white";});
    document.getElementById("b").addEventListener("click", function(){document.getElementById("p").style.color="white";});
    </script>

Answer 1

document.getElementById("b").addEventListener("click", function(){
     document.getElementById("p").innerHTML = "white";
     document.getElementById("p").style.color = "white";
});

或更好......

document.getElementById("b").addEventListener("click", function(){
     var el = document.getElementById("p");
     el.innerHTML = "white";
     el.style.color = "white";
});

Answer 2

这不起作用吗？

document.getElementById("b").addEventListener("click", function()
{document.getElementById("p").innerHTML= "white";
document.getElementById("p").style.color="white";});

Answer 3

这样的事情会起作用

var events = [];
events.push(function(){document.getElementById("p").innerHTML= "white";});
events.push(function(){document.getElementById("p").style.color="white";});
document.getElementById("b").addEventListener("click", function(){
    for(var i = 0; i < events.length; i++) events[i]();
});

Answer 4

对于一般情况，您可以使用匿名函数

(function (node) {
   // code operating on node = document.getElementById("b")
   node.addEventListener("click", function(){
     (function (node_in) {
        // code operating on node_in = document.getElementById("p")
        node_in.innerHTML = "white";
        node_in.style.color = "white";
     })(document.getElementById("p"));
   });
})(document.getElementById("b"));

使用getElementById一次指定2个操作

4 个答案: