Change input color to green with JavaScript

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

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>

Leave a Reply

Your email address will not be published. Required fields are marked *