我已經(jīng)為這些按鈕編寫(xiě)了這段代碼，因此當(dāng)我單擊它們時(shí)，背景顏色會(huì)發(fā)生變化，但它不起作用。問(wèn)題是什么？<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貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊
您的代碼有兩個(gè)問(wèn)題：
1)document.querySelector只會(huì)返回第一個(gè)匹配的元素
2) 該click事件不接受帶有此類參數(shù)的函數(shù)。
更好的代碼是：
document.querySelectorAll('.button')
.forEach(btn =>
btn.addEventListener('click', () => document.body.style.background = btn.id)
);（這里我btn再次重用而不是使用事件中的數(shù)據(jù)，因?yàn)槲乙呀?jīng)知道你點(diǎn)擊了哪個(gè)按鈕，所以不需要亂搞ev.target...
慕虎7371278
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
您必須使用.querySelectorAll在所有元素上添加偵聽(tīng)器.button。
我還糾正了你的語(yǔ)法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貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
使用 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 關(guān)注
- 221 瀏覽
添加回答
舉報(bào)
0/150
提交
取消