我已经为这些按钮编写了这段代码，因此当我单击它们时，背景颜色会发生变化，但它不起作用。问题是什么？<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <title>JavaScript Background Color Switcher</title></head><body> <div class="canvas"> <h1>Color Scheme Switcher</h1> <span class="button" id="grey"></span> <span class="button" id="white"></span> <span class="button" id="blue"></span> <span class="button" id="yellow"></span> </div> <script src="app.js"></script> </body></html> JS File:document.querySelector('.button').addEventListener('click', function btn (id) { document.body.style.background = id})
3 回答
慕姐4208626
TA贡献1852条经验 获得超7个赞
您的代码有两个问题：
1)document.querySelector只会返回第一个匹配的元素
2) 该click事件不接受带有此类参数的函数。
更好的代码是：
document.querySelectorAll('.button')
.forEach(btn =>
btn.addEventListener('click', () => document.body.style.background = btn.id)
);（这里我btn再次重用而不是使用事件中的数据，因为我已经知道你点击了哪个按钮，所以不需要乱搞ev.target...
慕虎7371278
TA贡献1802条经验 获得超4个赞
您必须使用.querySelectorAll在所有元素上添加侦听器.button。
我还纠正了你的语法addEventListener
let btns = document.querySelectorAll('.button')
btns.forEach(btn => {
btn.addEventListener('click', evt => {
document.body.style.background = evt.target.id
})
})
.button { cursor: pointer; }
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span class="button" id="grey">Grey</span>
<span class="button" id="white">White</span>
<span class="button" id="blue">Blue</span>
<span class="button" id="yellow">Yellow</span>
</div>
德玛西亚99
TA贡献1770条经验 获得超3个赞
使用 document.querySelectorAll 代替 document.querySelector
let buttons = document.querySelectorAll('.button')
buttons.forEach(element=>{
element.addEventListener('click', (e) => {
document.body.style.background = e.target.id
})
})
span{
padding: 4px 6px;
border: 1px solid;
cursor: pointer;
}
#grey{
background :grey;
}
#white{
background :white;
}
#blue{
background :blue;
}
#yellow{
background :yellow;
}
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span class="button" id="grey">gray</span>
<span class="button" id="white">white</span>
<span class="button" id="blue">blue</span>
<span class="button" id="yellow">yellow</span>
</div>
- 3 回答
- 0 关注
- 161 浏览
添加回答
举报
0/150
提交
取消