here's my code:
<body> <header> <h1>Html quiz</h1> </header> <article> <h2>What color is this? #00ff00 <ul> <li> <input type="radio" name="color1" id="red" /> red </li> <li> <input type="radio" name="color1" id="green" /> green </li> <li> <input type="radio" name="color1" id="blue" /> blue </li> <li> <input type="radio" name="color1" id="teal" /> 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
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.
You should be using className
result.className = "red" You are missing a closing h2 tag. It should be:
<h2><!-- Content --></h2> 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.
Source: Stackoverflow.com