我的网站中的 javascript 有什么问题？
有人可以解释为什么我的代码不起作用，我想要实现的是包含三个问题的多项选择测验，其中两个在单击时切换到红色图像，另一个变为绿色并运行 javascript，其中显示包含链接的 div到下一页按钮。
<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</span></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>
我知道我的代码有点乱...抱歉
arran-15 岁的网络编码员
编辑- 我已将其放入我的保管箱中，以便您可以看到我的问题。 点击此处 我想做的是，当您单击网球或壁球旁边的图像时，它会变成红色（false.png），当他们单击羽毛球时，它会变成绿色（true.png），然后出现下一个问题，在此刻只出现下一个问题，并且我在图像更改方面遇到问题
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</span></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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
text未定义。您必须先定义变量，然后才能使用它。由于您使用的是
.innerHTML = ...，我假设text必须以这种方式声明：JS:
HTML (somewhere):
textis undefined. You have to define the variable, before you can use it.Since you're using
.innerHTML = ..., I assume thattexthas to be declared in such way:JS:
HTML (somewhere):
将脚本添加到 There are much
Missing 的末尾。
之后重试。
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 .
你的 JavaScript 在语法上是没问题的，尽管它没有做你想要它做的事情。我对你的 HTML 确实有一些建议。请确保：
）我将更新此答案，并提供一些有关如何修复您的问题的建议JavaScript 很快。
更新：这是您要查找的内容的简化版本。随意修改：http://jsfiddle.net/U7J5W/
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:
<div id="question1"/>)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/