Question

我正在学习JS，并试图在单击按钮时简单地更改div的背景颜色，并想知道为什么我的代码无法正常工作。

也许有人可以快速浏览以下代码：

let btnLeft = document.getElementsByClassName("left");
let btnRight = document.getElementsByClassName("right");
let ad = document.getElementById("ad");

btnLeft.addEventListener("click", changeTheBg());
btnRight.addEventListener("click", changeTheBg2());


function changeTheBg(){
   
ad.style.backgroundColor = "green";

};

function changeTheBg2(){
    
    ad.style.backgroundColor = "pink";
    
    };

#ad {
width: 400px;
max-width: 500px;
height:200px;
background-color: red;
border-radius: 20px;
}

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>

<div id="ad"></div>

<div id="controls">
    <button class="left">Left
    </button>
    <button class="right">Right
    </button>
</div>
<script src="script.js"></script>
</body>
</html>

Answer 1

您有几个问题：

.addEventListener()采用函数“引用”作为第二个参数，您已传递函数“调用”，因为您已在函数名称后添加了括号：
```
btnLeft.addEventListener("click", changeTheBg());
```
因此，您的changeTheBg函数正在被调用立即以及该函数的返回值（在此案例）作为回调的参考。

只需删除括号：
```
btnLeft.addEventListener("click", changeTheBg);
```
您拼错了getElementById()，不是getElementsById()。
.getElementsByClassName()返回元素的集合，不是一个，所以尝试在电话上致电.addEventListener() 收集将失败。而是使用.querySelector()，返回与传递给CSS选择器的第一个元素它，如：
```
let btnLeft = document.querySelector(".left");
let btnRight = document.querySelector(".right");
```
pinks是无效的颜色。

这是工作代码：

let btnLeft = document.querySelector(".left");
let btnRight = document.querySelector(".right");
let ad = document.getElementById("ad");

btnLeft.addEventListener("click", changeTheBg);
btnRight.addEventListener("click", changeTheBg2);

function changeTheBg(){
  ad.style.backgroundColor = "green";
};

function changeTheBg2(){
  ad.style.backgroundColor = "pink";
};

#ad {
  width: 400px;
  max-width: 500px;
  height:200px;
  background-color: red;
  border-radius: 20px;
}

<div id="ad"></div>

<div id="controls">
    <button class="left">Left
    </button>
    <button class="right">Right
    </button>
</div>

Answer 2

getElementsByClassName返回实时NodeList，而使用querySelector(".classname")（有关为什么不使用NodeList的信息，请参阅Scott的注释和链接！）
getElementsById是一个错字，应为getElementById（单数），因为您只能通过id选择单个元素
您必须绑定到处理函数名称参考，而不是通过()
“粉红色”是另一种错字，不是有效的颜色名称，应为“粉红色”

let btnLeft = document.querySelector(".left");
let btnRight = document.querySelector(".right");
let ad = document.getElementById("ad");

btnLeft.addEventListener("click", changeTheBg);
btnRight.addEventListener("click", changeTheBg2);


function changeTheBg() {
  ad.style.backgroundColor = "green";
};

function changeTheBg2() {
  ad.style.backgroundColor = "pink";
};

#ad {
  width: 400px;
  max-width: 500px;
  height: 200px;
  background-color: red;
  border-radius: 20px;
}

<div id="ad"></div>
<div id="controls">
  <button class="left">Left
    </button>
  <button class="right">Right
    </button>
</div>

通过单击按钮更改背景颜色

2 个答案: