开发者

cant find my error in my html code, for a javascript quiz

开发者 https://www.devze.com 2023-04-13 06:51 出处:网络
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 cli

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号