时间戳

首页 > 解决方案 > 使用 javascript 单击按钮时更改元素的背景颜色样式

javascript - 使用 javascript 单击按钮时更改元素的背景颜色样式

问题描述

我刚刚做了一个快速简单的测试，我的用户可以通过勾选 html 复选框来选择特定问题的答案。我想为用户提供一个功能，让用户单击特定按钮以将正确答案的背景颜色样式更改为绿色，以便用户知道他是否正确回答。

我已经尝试了多个基于 javascript 的代码，这些代码可以在谷歌的前几页上找到。

<style>
#ca {
background-color:white;
}
</style>
<b>My question:</b>
<l>
        <li id="ca"><input type="checkbox"> Answer 1</li>
    <li><input type="checkbox"> Answer 2</li>
    <li><input type="checkbox"> Answer 3</li>
    <li id="ca"><input type="checkbox"> Answer 4</li>
</l>
    <button type="button"
    onclick="document.getElementById('ca').style.background-color = 'green'">
    Show me the correct answers.</button>

使用元素 ID 'ca' 指定正确答案。

我想在单击按钮时更改 ID 为“ca”的元素的背景颜色。

标签： javascripthtmlcss

解决方案

您对重复的 ID 有疑问：

 Element.id

如果 id 值不是空字符串，它在一个文档中必须是唯一的

拥抱addEventListener绑定事件的功能，测试、阅读代码等更花哨、更清晰。

这种方法使用一种cans在单击按钮时添加绿色背景的样式。

document.getElementById('myButton').addEventListener('click', function() {
  Array.from(document.querySelectorAll('.ca')).forEach(function(e) {
    e.classList.add('cans');
  });
});
.cans {
  background-color: green;
}
<b>My question:</b>
<l>
  <li class="ca"><input type="checkbox"> Answer 1</li>
  <li><input type="checkbox"> Answer 2</li>
  <li><input type="checkbox"> Answer 3</li>
  <li class="ca"><input type="checkbox"> Answer 4</li>
</l>
<button id='myButton' type="button">
    Show me the correct answers.</button>

推荐阅读