使用查询选择器（JS）通过单击更改背景颜色

3回答

慕姐4208626

您的代码有两个问题：1)document.querySelector只会返回第一个匹配的元素2) 该click事件不接受带有此类参数的函数。更好的代码是：document.querySelectorAll('.button')   .forEach(btn =>      btn.addEventListener('click', () => document.body.style.background = btn.id)   );（这里我btn再次重用而不是使用事件中的数据，因为我已经知道你点击了哪个按钮，所以不需要乱搞ev.target...

慕虎7371278

您必须使用.querySelectorAll在所有元素上添加侦听器.button。我还纠正了你的语法addEventListenerlet 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

使用 document.querySelectorAll 代替 document.querySelectorlet 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>