I'm making a simple multiple choice program using radio buttons. When the student gets an answer wrong I can put an X after her choice, but how do I make the X red? Thanks for any help, Gerard
<body>
<input type="radio" name="Q1" value="1756-1819,Berlioz"
onclick = "radioProcessor(this)" /> 1756-1819
<script>
function radioProcessor(theRadio){
theRadio.nextSibling.nodeValue = theRadio.nextSibling.nodeValue + " X";
}
</script>
</body>
Say, thanks Andree but that didn't work. I think because a TextNode holds text, not other elements (like a span). However thanks to your idea this is possible -
<input type="radio" name="Q1" value="1756-1819,Berlioz"
onclick = "radioProcessor(this)" /> <span> 1756-1819</span>
<script>
function radioProcessor(theRadio){
console.log(theRadio.nextElementSibling); // prints [object Text]
theRadio.nextElementSibling.setAttribute("style","color:red");
theRadio.nextElementSibling.innerHTML =
theRadio.nextElementSibling.innerHTML + " X";
}
It's closer, but I'd like to have only the "X" in red :-) It also continues adding X's every time the radio button is pressed!
This code works for me. Even when clicking twice on the radio button.
<input type="radio" name="Q1" value="1756-1819,Berlioz"
onclick = "radioProcessor(this)" /> <span id="value"> 1756-1819</span>
<script>
function radioProcessor(theRadio){
var xAdded = document.getElementsByClassName("incorrect").length;
if(!xAdded) {
var result = document.createElement('span');
result.setAttribute("class", "incorrect");
result.innerHTML = theRadio.nextSibling.nodeValue + " X";
var value = document.getElementById("value");
value.parentNode.insertBefore(result, value.nextSibling);
}
}
</script>
