cant find my error in my html code, for a javascript quiz
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 (fals开发者_开发百科e.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>
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>
All three images have the same id (answer). They should probably have unique IDs. Also, I'd put the image flipping code into a function and call the function on click instead of putting the code in the onclick of the button.
精彩评论