HTML Quiz - кнопка JavaScript (поворот результатов зеленый, ложный красный)

Question

ПРИМЕЧАНИЕ. Это всего лишь фрагмент кода, который я должен написать. Есть около 8 вопросов, все они имеют одинаковую структуру только с правильным «текстом»

Моя проблема в том, что у меня есть тест в HTML, и мне нужны правильные / неправильные ответы, чтобы соответственно изменить цвет, если я нажму на кнопку ниже. Я новичок в JS, и мне жаль, если на этот вопрос уже отвечали. Я часами пытался найти решение для этого и спросил одного из моих одноклассников. Я чувствую, что упускаю что-то, что может быть очевидным для других.

 /*  What I've already tried:
 x Instead of using "" - used those ''
 x Tried using the div ID 
 x I added "var" infront of the document.getElement(...) and removed it again
 x Tried document.getElement(..).style.Texttransform.color=".." */





/*The HTML Part*/

<div id= "question7">

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

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

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

</form>
</div>



/* The Button */

<div id= "send" >

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

</form>
</div>




/*The Script Part*/

<script>
function change() {

document.getElementbyID("wrong").style.color ="red";
document.getElementbyID("right").style.color ="green";

}
</script>

Answer 1

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

<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>, так что все готово. проверьте этот код

Answer 3

У вас довольно много ошибок.Вы должны назвать свой радиовход одинаковым, чтобы он действовал как радиокнопка (поэтому можно выбрать только один).Вы должны использовать метки для текста этих переключателей, используя для соответствия идентификатору каждого переключателя.Затем вы должны получить идентификатор метки , а не ввода, чтобы изменить цвет.

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

Название должно быть для обеих радиокнопок. :)