не могу найти мою ошибку в моем HTML-коде, для викторины JavaScript - PullRequest
Новая
       18

не могу найти мою ошибку в моем HTML-коде, для викторины JavaScript

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

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

http://dl.dropbox.com/u/13722201/website/quiz.html

Пожалуйста, не могли бы вы покопаться в исходном коде и выяснить это, потому что я 'м озадачен. 

<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>

JavaScript, показывающий / скрывающий 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>

Ответы [ 2 ]

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

Ваши обработчики onclick содержат этот код: 

document.answer.src='images/false.png'

document не имеет свойства answer.Лучший способ манипулировать DOM в JavaScript - это присвоить вашему HTML-элементу уникальный идентификатор: 

<img id="tennis-answer" alt="" src="images/answer.png" width="290" height="60"/>

Если элемент имеет уникальный идентификатор, вы можете получить ссылку на него и изменить элемент: 

document.getElementById('tennis-answer')
        .setAttribute('src', 'images/false.png');

Вот как все это выглядит вместе для ответа в бадминтоне: 

<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>
0 голосов
/ 14 октября 2011

Все три изображения имеют одинаковый идентификатор (ответ). Вероятно, они должны иметь уникальные идентификаторы. Кроме того, я поместил бы код переворачивания изображения в функцию и вызвал бы функцию по щелчку вместо того, чтобы помещать код в нажатие кнопки.

...