Question

注意：这只是我必须编写的代码的一部分。共有8个问题，所有问题都具有相同的结构，只是带有适当的“文字”

我的问题是，我有一个HTML测验，如果我单击下面的按钮，我需要正确/错误的答案以相应地更改颜色。我是JS的新手，很抱歉，如果以前已经回答过这个问题。我花了数小时试图为此找到解决方案，并问了我的一位同学。我觉得我想念的东西也许对其他人来说很明显。

${workspaceFolder}/project.csproj

Answer 1

<div id= "question7">

<form>
<p> Question 7? </p> 

<p id = "wrong" ><input type = "radio"  name= "question7a" value = "Yes">
 Yes a b c </input></p>

<p id = "right"  ><input type = "radio"  name= "question7b" value = "No"
>No, a b c </input></p>

</form>
</div>


<div id= "send" >

<form>
<input id="change_button" type="button" value="Change" 
onClick="change()"/>

</form>
</div>

确切的语法是document.getElementById（注意ById），然后将id="right"和id ="wrong"放在<p>中，这样就完成了。 check this code

Answer 2

您有很多错误。您应该将您的单选输入命名为相同的名称，以便它们像单选按钮一样起作用（因此一次只能选择一个）。您应该在这些单选按钮的文本上使用标签，并使用for来对应每个单选按钮的ID。然后，您应该获取 label 的ID（而非输入）来更改颜色。

<div id="question7">
  <form>
    <p> Question 7? </p>
    <input id="7a" type="radio" name="question7">
    <label id="wrong" for="7a">Yes, a b c</label>
    <br>
    <input id="7b" type="radio" name="question7">
    <label id="right" for="7b">No, a b c</label>
  </form>
</div>
<br>
<div id="send">
  <input id="change_button" type="button" value="Change" onClick="change();" />
</div>

<script>
  function change() {
    document.getElementById("wrong").style.color = "red";
    document.getElementById("right").style.color = "green";
  }
</script>

Answer 3

    <form>
        <p> Question 7? </p> 
        <p><input type = "radio" id = "wrong" name= "question7" value = "Yes">Yes a b c <br></p>
        <p><input type = "radio" id = "right" name= "question7" value = "No">No, a b c <br></p>
    </form>
</div>
<div id= "send" >
    <form>
        <input id="change_button" type="button" value="Change" onclick="change();"/>
        <p id="error_msg" style="display:none;color:red;">Please select the answer</p>
    </form>
</div>

<script>
function change() {
    var questions = document.getElementsByTagName('input');
    for (var i=0; i< questions.length;i++){
        if(questions[i].type === 'radio' && questions[i].checked){
            document.getElementById("wrong").parentNode.style.color ="red";
            document.getElementById("right").parentNode.style.color ="green";
            document.getElementById('error_msg').style.display = 'none';
            break;
        }
        else{
            document.getElementById('error_msg').style.display = 'block';
        }
    }
}
</script>

Answer 4

<div id= "question7">
<form>
<p> Question 7? </p>
<p><input type = "radio" id = "wrong" name= "question7" value = "Yes">
 Yes a b c <br></p>
<p><input type = "radio" id = "right" name= "question7" value = "No">No, a b c <br></p>
</form>
</div>

名称应该是两个单选按钮的名称。：）

HTML测验-JavaScript按钮（将结果变为绿色，红色变为假）

4 个答案: