Change input color to green with JavaScript

Question

I have this quizz form:

<section>
    <form name="formulaire" >
        <h3>1. Le rôle du HTML est de : </h3>
        <input type="radio" name="question1" value="a">  a. Mettre en forme du texte <br/>
        <input type="radio" name="question1" value="b" id="correct">  b. Structurer un document <br/>
        <input type="radio" name="question1" value="c">  c. Lier un document à une feuille de style <br/>

        <h3>2. Pour définir un titre dans une page HTML, on utilise : </h3>
        <input type="radio" name="question2" value="a" id="correct">  a. La balise title <br/>
        <input type="radio" name="question2" value="b">  b. La balise titre <br/>
        <input type="radio" name="question2" value="c">  c. La balise head <br/>

        <h3>3. A quoi sert l'attribut alt de la balise img ? </h3>
        <input type="radio" name="question3" value="a">  a. A afficher une deuxième image si la première ne peut pas s'afficher <br/>
        <input type="radio" name="question3" value="b">  b. A donner un lien alternatif vers l'image si le premier est cassé <br/>
        <input type="radio" name="question3" value="c" id="correct">  c. A donner une description de l'image si celle-ci ne peut pas s'afficher <br/>

        <h3>4. p{background-color : #000;} permet de définir : </h3>
        <input type="radio" name="question4" value="a">  a. La couleur de la police du paragraphe <br/>
        <input type="radio" name="question4" value="b" id="correct">  b. La couleur du fond du paragraphe <br/>
        <input type="radio" name="question4" value="c">  c. Aucun des deux <br/>

        <h3>5. Laquelle de ces syntaxes est correcte pour écrire un commentaire en JavaScript ? </h3>
        <input type="radio" name="question5" value="a" id="correct">  a. // Commentaire <br/>
        <input type="radio" name="question5" value="b">  b. / Commentaire / <br/>
        <input type="radio" name="question5" value="c">  c. &lt;!-- Commentaire--&gt; <br/>

        <br/>
        <input type="submit" value="Valider" onclick="return validation()">
    </form>
</section>

I want to make right answers green and wrong answers into red, using JS CSS and HTML5 only, no framework needed. This is what I wrote in JS but didn't work:

document.forms.getElementById("correct").style.color = "green";

I don't understand why it didn't work. And I don't know how to do it.

Answer 1

IDs need to be unique

Use a label and class - you cannot colour a radio

 //document.querySelectorAll(".correct").forEach(answer => answer.style.backgroundColor = "green") document.querySelectorAll(".correct")[1].style.backgroundColor = "green" // alternative document.querySelector("[name=question3][value=c]").closest("label").style.backgroundColor = "green"

 <section> <form name="formulaire"> <h3>1. Le rôle du HTML est de: </h3> <label><input type="radio" name="question1" value="a"> a. Mettre en forme du texte</label><br/> <label class="correct"><input type="radio" name="question1" value="b"> b. Structurer un document</label><br/> <label><input type="radio" name="question1" value="c"> c. Lier un document à une feuille de style</label><br/> <h3>2. Pour définir un titre dans une page HTML, on utilise: </h3> <label class="correct"><input type="radio" name="question2" value="a"> a. La balise title</label><br/> <label><input type="radio" name="question2" value="b"> b. La balise titre</label><br/> <label><input type="radio" name="question2" value="c"> c. La balise head</label><br/> <h3>3. A quoi sert l'attribut alt de la balise img? </h3> <label><input type="radio" name="question3" value="a"> a. A afficher une deuxième image si la première ne peut pas s'afficher</label><br/> <label><input type="radio" name="question3" value="b"> b. A donner un lien alternatif vers l'image si le premier est cassé</label><br/> <label class="correct"><input type="radio" name="question3" value="c"> c. A donner une description de l'image si celle-ci ne peut pas s'afficher</label><br/> <h3>4. Permet de définir: </h3> <label><input type="radio" name="question4" value="a"> a. La couleur de la police du paragraphe</label><br/> <label class="correct"><input type="radio" name="question4" value="b"> b. La couleur du fond du paragraphe</label><br/> <label><input type="radio" name="question4" value="c"> c. Aucun des deux</label><br/> <h3>5. Laquelle de ces syntaxes est correcte pour écrire un commentaire en JavaScript? </h3> <label class="correct"><input type="radio" name="question5" value="a"> a. // Commentaire</label><br/> <label><input type="radio" name="question5" value="b"> b. / Commentaire /</label><br/> <label><input type="radio" name="question5" value="c"> c. &lt;;-- Commentaire--&gt;</label><br/> </label><br/> <label><input type="submit" value="Valider" onclick="return validation()"> </form> </section>

Perhaps this

 document.getElementById("formulaire").addEventListener("submit",function(e) { e.preventDefault(); document.querySelectorAll("input[type=radio]").forEach(rad => { const label = rad.closest("label"); const classList = label.classList; classList.remove("red","green") if (rad.checked) { classList.add(classList.contains("correct")? "green": "red"); } }) })

 .red { background-color: red;}.green { background-color: green;}

 <section> <form id="formulaire"> <h3>1. Le rôle du HTML est de: </h3> <label><input type="radio" name="question1" value="a"> a. Mettre en forme du texte</label><br/> <label class="correct"><input type="radio" name="question1" value="b"> b. Structurer un document</label><br/> <label><input type="radio" name="question1" value="c"> c. Lier un document à une feuille de style</label><br/> <h3>2. Pour définir un titre dans une page HTML, on utilise: </h3> <label class="correct"><input type="radio" name="question2" value="a"> a. La balise title</label><br/> <label><input type="radio" name="question2" value="b"> b. La balise titre</label><br/> <label><input type="radio" name="question2" value="c"> c. La balise head</label><br/> <h3>3. A quoi sert l'attribut alt de la balise img? </h3> <label><input type="radio" name="question3" value="a"> a. A afficher une deuxième image si la première ne peut pas s'afficher</label><br/> <label><input type="radio" name="question3" value="b"> b. A donner un lien alternatif vers l'image si le premier est cassé</label><br/> <label class="correct"><input type="radio" name="question3" value="c"> c. A donner une description de l'image si celle-ci ne peut pas s'afficher</label><br/> <h3>4. Permet de définir: </h3> <label><input type="radio" name="question4" value="a"> a. La couleur de la police du paragraphe</label><br/> <label class="correct"><input type="radio" name="question4" value="b"> b. La couleur du fond du paragraphe</label><br/> <label><input type="radio" name="question4" value="c"> c. Aucun des deux</label><br/> <h3>5. Laquelle de ces syntaxes est correcte pour écrire un commentaire en JavaScript? </h3> <label class="correct"><input type="radio" name="question5" value="a"> a. // Commentaire</label><br/> <label><input type="radio" name="question5" value="b"> b. / Commentaire /</label><br/> <label><input type="radio" name="question5" value="c"> c. &lt;;-- Commentaire--&gt;</label><br/> </label><br/> <label><input type="submit" value="Valider"> </form> </section>

Answer 2

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

Use class instead.

w3schools

after that you can simply use

document.getElementsByClassName("example");

Answer 3

<div class="someClass"> 
  Hello World
</div>

<Script>
 var all = document.getElementsByClassName('someClass');
 for (var i = 0; i < all.length; i++) {
  all[i].style.color = 'red';
 }
</script>

I hope this solves your problem

Answer 4

Your code should work fine, as far as I can see.

The only problem that I notice is that you have same ID in multiple place. Make ID unique, it will work fine.

Hope that solves the problem. ID must be unique.

Or use class for multiple ones!!