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.

Thank you, I changed it, it stil didn't work do you have any idea on how to color correct answers ? — , Mar 18 '21 at 09:58
Duplicate of [JavaScript and getElementById for multiple elements with the same ID](https://stackoverflow.com/q/3607291/4642212). Use classes instead. Use classes every time there is _an_ element of some kind, and IDs whenever there is _the_ element of some kind. You have five different correct answers, so each of them is _a_ correct answer, not _the_ correct answer. — Sebastian Simon, Mar 18 '21 at 10:02
"_I changed it, it stil didn't work_" isn't nearly enough information for us to be able to tell what you changed exactly. — Ivar, Mar 18 '21 at 10:05
Instead of using ID="correct" I used class="correct" for each input — , Mar 18 '21 at 10:31

mplungjan · Accepted Answer · 2021-03-18T12:48:12.097

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>

Thank you sir for your answer, can you please simplify this part `forEach(answer => answer.style.backgroundColor = "green")` so that I can apply it on one element ? — , Mar 18 '21 at 10:40
You can also do `document.querySelector("[name=question3][value=c]").closest("label").style.backgroundColor = "green"` — mplungjan, Mar 18 '21 at 10:57
Thank you so much your answer helped me a lot, here's what I did: `document.querySelector(".correct").style.backgroundColor = "green";` for every correct answer in HTML : ` b. Structurer un document
` — , Mar 18 '21 at 11:06
see my updated example to test if the background should be green red or white. I still suggest you use labels since the user can click on the sentence to check the radio. I changed form name to for ID — mplungjan, Mar 18 '21 at 12:48

score 0 · Answer 2 · answered Mar 18 '21 at 09:58

0

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");

answered Mar 18 '21 at 09:58

Lahiru Madusanka

270
2
13

1

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – mplungjan Mar 18 '21 at 10:00
Thank you, I tried using class element instead of id, it still didn't work, do you have an ida on how to color an input ? – Mar 18 '21 at 10:01
do you need to change the background colour or border colour? this link will cover most of the styles https://www.w3schools.com/css/css_form.asp and for checkbox, radio buttons use this link https://www.w3schools.com/howto/howto_css_custom_checkbox.asp – Lahiru Madusanka Mar 18 '21 at 10:05
I want to add a green color to inputs where class="correct" using JS, when the form is submitted. Actually, it's a quizz where the right answers should be colored in green and wrong answers in red. Using css it should be color:red; or color:green; – Mar 18 '21 at 10:27

score 0 · Answer 3 · answered Mar 18 '21 at 11:56

0

<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

answered Mar 18 '21 at 11:56

Moinul Robin

36
1
10

score -1 · Answer 4 · answered Mar 18 '21 at 10:02

-1

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

answered Mar 18 '21 at 10:02

Moinul Robin

36
1
10

I changed it into class="correct" and still didn't work.. – Mar 18 '21 at 10:47

Change input color to green with JavaScript

4 Answers4