Question

document.getElementById("button2").addEventListener("click", function({
  document.getElementById("box").body.style.backgroundColor = "Blue";
});

当我点击它时，

没有改变盒子的颜色，代码中的错误在哪里？

Answer 1

您需要删除// const thing = this.props.dates.map(function(sec,index) { // var keyVal = sec[Object.keys(sec)] // for (var variable in (keyVal)) { // console.log('keyVal',keyVal); // // return( // <div key = {index}> // <h9>{Object.keys(sec)[0]}</h9> // <p>{variable}:{keyVal[variable]}</p> // </div> // ) // } // // })，因为您之前已选择了包含ID的元素。

.body

Answer 2

使用querySelector选择元素。并按下这样的按钮处理点击事件。

var btn = document.querySelector("#button2");//select your button
btn.addEventListener('click',function(){//handle click event
document.querySelector("#box").style.backgroundColor="Blue";//select box id and set background
});

<button id="button2"/>Click</button>
<p id="box">
change color
</p>

Answer 3

你做错了。有两种方法可以做到这一点

首先::

＆＃13;

document.getElementById("button2").addEventListener(
        "click", 
        function(){
            document.getElementById("box").style.backgroundColor = "Blue";
        }
    );

＆＃13;

Second ::如果您的DOM中有正文标记

＆＃13;

document.body.getElementById("button2").addEventListener(
        "click", 
        function(){
            document.getElementById("box").style.backgroundColor = "Blue";
        }
    );

＆＃13;

Answer 4

您的JavaScript应该如下所示：

document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.backgroundColor = "Blue"; });

Javascript无法使按钮更改框的颜色

4 个答案: