what is wrong with my javascript in my website?_问答_开发者

what is wrong with my javascript in my website?

开发者 https://www.devze.com 2023-04-12 21:27 出处：网络

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 jav

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/