что не так с моим JavaScript на моем сайте? - PullRequest
Новая
       14

что не так с моим JavaScript на моем сайте?

0 голосов
/ 14 октября 2011

Может кто-нибудь объяснить, почему мой код не работает, чего я хочу добиться - это тест с несколькими вариантами ответов с тремя вопросами, два из которых переключаются на красное изображение при нажатии, а другой - зеленым и запускает 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>

я знаю, что мой код немного запутан ... извините

аранж-15-летний веб-кодер

Редактировать- Я поместил его в мою коробку, чтобы вы могли видеть мою проблему. Нажмите здесь Я пытаюсь сделать следующее: когда вы нажимаете на изображение рядом с теннисом или сквошом, оно становится красным (false.png), а когда они нажимают на бадминтон, оно становится зеленым (true.png), которое затемвызывает появление следующего вопроса, в данный момент появляется только следующий вопрос, и у меня возникают проблемы с изменением изображений

Ответы [ 3 ]

1 голос
/ 14 октября 2011

text не определено.Вы должны определить переменную, прежде чем сможете ее использовать.

Поскольку вы используете .innerHTML = ..., я предполагаю, что text должен быть объявлен таким образом:

JS:

var text = document.getElementById("text");

HTML (где-то): 

<div id="text"></div>
0 голосов
/ 14 октября 2011

Ваш JavaScript синтаксически в порядке, хотя он не делает то, что вы хотите, чтобы он делал. У меня есть несколько советов по поводу вашего HTML. Пожалуйста, убедитесь:

  • Идентификаторы элементов уникальны. (т.е. только один элемент с идентификатором ответа)
  • Значения атрибутов элемента, которые являются строками, заключены в кавычки. (т.е. <div id="question1"/>)
  • Вместо document.answer используйте document.getElementById ("answer")

Я обновлю этот ответ некоторыми советами о том, как исправить ваш JavaScript в ближайшее время.

Обновление : вот упрощенная версия того, что вы ищете. Не стесняйтесь изменять: http://jsfiddle.net/U7J5W/

0 голосов
/ 14 октября 2011

Добавьте скрипт в конец

. Пропущено множество </div>.<script> не может быть внутри <div>

<script> должно быть ниже <div id='next'>

После этого повторите попытку.

...