[javascript] need to add a class to an element

here's my code:

<body> <header> <h1>Html quiz</h1> </header> <article> <h2>What color is this?&nbsp;&nbsp; #00ff00  <ul>     <li>     <input type="radio" name="color1" id="red" />&nbsp;&nbsp;red     </li>     <li>     <input type="radio" name="color1" id="green" />&nbsp;&nbsp;green     </li>     <li>     <input type="radio" name="color1" id="blue" />&nbsp;&nbsp;blue     </li>     <li>     <input type="radio" name="color1" id="teal" />&nbsp;&nbsp;teal     </li>     <li>     <input type="submit" name="submit" value="Submit" onClick="fsubmit()" />     </li> </ul> </article> <div id="result"> </div> <script> function fsubmit() { var answer = document.getElementById("green"); var result = document.getElementById("result"); if(answer.checked == true) {result.innerHTML="correct!";} else {result.class="red";  result.innerHTML="wrong";} } </script> </body> 

It's the first bit of code result.class="red" does nothing and the debugging console on chrome doesn't indicate a problem.

This question is related to javascript css

The answer is


You are missing a closing h2 tag. It should be:

<h2><!-- Content --></h2> 

You should be using className

result.className = "red" 

You probably need something like:

result.className = 'red'; 

In pure JavaScript you should use className to deal with classes. jQuery has an abstraction called addClass for it.


You can use result.className = 'red';, but you can also use result.classList.add('red');. The .classList.add(str) way is usually easier if you need to add a class in general, and don't want to check if the class is already in the list of classes.