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

注意：这只是我必须编写的代码片段。共有8个问题，它们都有相同的结构，只是有一个适当的文本

我的问题是，我有一个HTML测验，如果我点击下面的按钮，我需要正确/错误的答案来相应地改变颜色。我是JS的新手，如果之前有人回答过这个问题，我很抱歉。我花了几个小时试图找到解决办法，并问了我的一位同学。我觉得我错过了一些对其他人来说很明显的东西

/*我已经尝试过的： x而不是使用-使用那些 x尝试使用div ID 我在文档前面添加了var.getElement。。。然后又把它拿走了 x尝试了document.getElement…style.Texttransform.color=*/ /*HTML部分*/ 问题7

是的

不，a b c

/*按钮*/ /*剧本部分*/ 功能改变{ document.getElementByIdError.style.color=红色； document.getElementbyIDright.style.color=绿色； } 两个单选按钮的名称均应为：

<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=error，这样就完成了。

---

您有不少错误。您应该将您的单选输入命名为相同的名称，这样它们就像单选按钮一样，一次只能选择一个。您应该为这些单选按钮的文本使用标签，使用来对应每个单选按钮的id。然后，您应该获得标签的id，而不是输入，以更改颜色

问题7

是的，a b c 不，a b c 功能改变{ document.getElementByIdError.style.color=红色； document.getElementByIdright.style.color=绿色； }

---

您使用的是document.getElementByID，这是不正确的-您在ID应为ID时已将其大写，但尚未将其大写。应该是这样的：document.getElementById.oh lol.不知道这么简单。。oof TT谢谢没问题，如果你需要更多帮助，请随时询问：好的，更新：我将ID更改为ID，并更新了问题7的名称，但仍然没有更改颜色。我用上面的代码创建了一个全新的html页面，我正在测试它。我也改变了它，不确定这是否有什么不同。这让我很头疼啊哈，我现在已经添加了一个答案，应该可以正常工作了。我不敢相信这会起作用。非常感谢，问题解决了。此代码因多个无线电输入而中断。尝试选择两者

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

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