Question

I have placed my website in my dropbox so you can see my problem. What I am trying to do is, when you click the image next to tennis or squash it turns red (false.png) and when they click badminton it turns green (true.png), which then makes the next question appear. At the moment only the next question appears and I’m having trouble with the image changing.

http://dl.dropbox.com/u/13722201/website/quiz.html

Please could you poke around in the source code and figure it out because I’m baffled.

<a onclick="document.getElementById('badminton-answer').setAttribute('src', 'images/true.png'" href="javascript:toggle();">
  <img id="badminton-answer" border="0" alt="" src="images/answer.png" width="290" height="60"/>
</a>

the javascript showing/ hiding div id=”next”

<script language="javascript"> 
function toggle() {
var ele = document.getElementById("next");

if(ele.style.display == "block") {
        ele.style.display = "none";
}
else {
    ele.style.display = "block";
}

}

</script> 

Answer 1

Your onclick handlers contain this code:

document.answer.src='images/false.png'

document doesn’t have an answer property. The best way to manipulate the DOM in JavaScript is to assign your HTML element a unique ID:

<img id="tennis-answer" alt="" src="images/answer.png" width="290" height="60"/>

If an element has a unique ID, then you can get a reference to it and modify the element:

document.getElementById('tennis-answer')
        .setAttribute('src', 'images/false.png');

Here’s how it all looks together for the Badminton answer:

<a onclick="document.getElementById('badminton-answer').setAttribute('src', 'images/true.png'" href="javascript:toggle();">
  <img id="badminton-answer" border="0" alt="" src="images/answer.png" width="290" height="60"/>
</a>