时间戳

首页 > 解决方案 > 使用 queryselector (JS) 通过单击更改背景颜色

javascript - 使用 queryselector (JS) 通过单击更改背景颜色

问题描述

我已经为这些按钮编写了这段代码，所以当我点击它们时，背景颜色会改变，但它不起作用。似乎是什么问题？

<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
})

标签： javascripthtmlcss

解决方案

您必须使用在所有元素.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>

推荐阅读