Question

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

std::thread t1{static_cast<void (*)(std::unique_ptr<A>)>(handleObj),obj};

Answer 1

您必须使用.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>

Answer 2

您的代码有两个问题：

1）document.querySelector仅返回 first 匹配元素

2）click事件没有带有此类参数的函数。

更好的代码是：

document.querySelectorAll('.button')
  .forEach(btn => 
    btn.addEventListener('click', () => document.body.style.background = btn.id)
  );

（这里我再次重用btn而不是使用事件中的数据，因为我已经知道您按下了哪个按钮，因此无需弄乱ev.target...

Answer 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>

您可以

使用queryselector（JS）单击更改背景颜色

3 个答案: