我已經為這些按鈕編寫了這段代碼，因此當我單擊它們時，背景顏色會發生變化，但它不起作用。問題是什么？<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 關注
- 222 瀏覽
添加回答
舉報
0/150
提交
取消