Question

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

我尝试了多种基于javascript的代码，这些代码可以在google的前几页中找到。

<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'的元素的背景颜色。

Answer 1

var chkbox = document.getElementsByClassName("chkbox");
var x = document.getElementById("mylist");

function onChangeListener() {

 
    for (var i = 0; i < chkbox.length; i++) {

        if (chkbox[i].checked) {
 
x.getElementsByClassName("ca")[i].style.backgroundColor = "green";
         
        }
else{x.getElementsByClassName("ca")[i].style.backgroundColor = "";}
    }
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>

<b>My question:</b>
<l id="mylist">
        <li id="ca" class="ca"><input type="checkbox" class="chkbox"> Answer 1</li>
    <li id="ca" class="ca"><input type="checkbox" class="chkbox"> Answer 2</li>
    <li id="ca" class="ca"><input type="checkbox" class="chkbox"> Answer 3</li>
    <li id="ca" class="ca"><input type="checkbox" class="chkbox"> Answer 4</li>
</l>
   <button onclick="onChangeListener()">
    Show me the correct answers.</button>

</body>
</html>

Answer 2

您的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>

使用javascript

2 个答案:

`Element.id`