what is wrong with my javascript in my website?
Can someone explain why my code isn't working, what i want to achieve is a multiple choice quiz with three questions, two of them switch to a red image when clicked, the other goes green and runs javascript which shows a div containing the link to the next page button.
<body id="body">
<div id="background">
<div id="container">
<div id="navigation">
<ul class="blue">
<li><a href="#" title="home"><span>home</span></a></li>
<li><a href="#" title="products" class="current"><span>Quiz</span></a></li>
<li><a href="#" title="blog"><span>Sports</span></a></li>
<li><a href="#" title="contact"><span>Contact</s开发者_如何学Gopan></a></li>
</ul>
</div>
<div id="content">
<div id="left"><img src="images/badminton.jpg" width="246" height="246" /></div>
<div id="right">
<h1>Question 1:</h1>
<h2>What sport is this used for? </h2>
<script language="javascript">
function toggle() {
var ele = document.getElementById("next");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
<div id="next" style="display: none"><IMG id=answer border=0 name=answer alt="" src="images/answer.png" width=290 height=60></div>
</div>
<div id="bottom">
<div id="question"1>
<div id="leftq">
Tennis
</div>
<div id="rightq">
<A onclick="document.answer.src='images/false.png'" href="#" ><IMG id=answer border=0 name=answer alt="" src="images/answer.png" width=290 height=60>
</A>
</div>
</div>
<div id="question"2>
<div id="leftq">
Squash</div>
<div id="rightq">
<A onclick="document.answer.src='images/false.png'" href="#" ><IMG id=answer border=0 name=answer alt="" src="images/answer.png" width=290 height=60>
</A>
</div>
</div>
<div id="question"3>
<div id="leftq">
Badminton</div>
<div id="rightqcorrect">
<A onclick="document.answer.src='images/true.png'" href="javascript:toggle();" ><IMG id=answer border=0 name=answer alt="" src="images/answer.png" width=290 height=60>
</A>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
i know my code is a bit messy...sorry
arran-15 year old web coder
Edit- i have placed it in my dropbox so you can see my problem. Click Here 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 images changing
text is undefined. You have to define the variable, before you can use it.
Since you're using .innerHTML = ..., I assume that text has to be declared in such way:
JS:
var text = document.getElementById("text");
HTML (somewhere):
<div id="text"></div>
Add the script to the end of the
There are many </div> missing . <script> cannot be inside a <div>
<script> should be below <div id='next'>
After this try again .
Your JavaScript is syntactically okay, although it isn't doing what you want it to do. I do have some advice about your HTML. Please make sure:
- Element ids are unique. (ie. only one element with id answer)
- Element attribute values that are strings are in quotes. (ie.
<div id="question1"/>) - Instead of document.answer, use document.getElementById("answer")
I will update this answer with some advice about how to fix your JavaScript soon.
Update: Here's a simplified version of what you're looking for. Feel free to modify: http://jsfiddle.net/U7J5W/
加载中,请稍侯......
精彩评论