Question

我正在使用单选按钮制作一个简单的多项选择程序。当学生得到错误的答案时，我可以在她选择之后放一个X，但是如何让X变成红色？谢谢你的帮助，杰拉德

<body> 

<input type="radio" name="Q1" value="1756-1819,Berlioz" 
             onclick = "radioProcessor(this)" />      &nbsp; 1756-1819

<script>
function radioProcessor(theRadio){
        theRadio.nextSibling.nodeValue = theRadio.nextSibling.nodeValue + " X";
}
</script>

</body>

Answer 1

说，谢谢Andree但是没有用。我认为因为TextNode包含文本，而不是其他元素（如span）。但是，多亏了你的想法，这是可能的 -

<input type="radio" name="Q1" value="1756-1819,Berlioz" 
             onclick = "radioProcessor(this)" /> <span>&nbsp; 1756-1819</span>

<script>
function radioProcessor(theRadio){
        console.log(theRadio.nextElementSibling); // prints [object Text]
        theRadio.nextElementSibling.setAttribute("style","color:red");
        theRadio.nextElementSibling.innerHTML = 
                          theRadio.nextElementSibling.innerHTML + " X";
}

它更接近，但我想只有红色的“X”:-)每次按下单选按钮时它还会继续添加X！

Answer 2

此代码适用于我。即使在单选按钮上单击两次。

<input type="radio" name="Q1" value="1756-1819,Berlioz"
             onclick = "radioProcessor(this)" />     <span id="value"> &nbsp; 1756-1819</span>

<script>
function radioProcessor(theRadio){
  var xAdded = document.getElementsByClassName("incorrect").length;
  if(!xAdded) {
    var result = document.createElement('span');
    result.setAttribute("class", "incorrect");
    result.innerHTML = theRadio.nextSibling.nodeValue + " X";
    var value = document.getElementById("value");
    value.parentNode.insertBefore(result, value.nextSibling);
  }


}
</script>

样式化TextNode

2 个答案: