Question

我已将我的网站放在我的保管箱中，以便您可以看到我的问题。我想要做的是，当你点击网球或壁球旁边的图像时，它变成红色（假.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>

Answer 1

您的onclick处理程序包含以下代码：

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

document没有answer属性。在JavaScript中操作DOM的最佳方法是为HTML元素分配唯一的ID：

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

如果元素具有唯一ID，则可以获取对它的引用并修改元素：

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>

Answer 2

所有三张图片都有相同的ID（答案）。他们应该有唯一的ID。此外，我将图像翻转代码放入一个函数中并在单击时调用该函数，而不是将代码放在按钮的onclick中。

无法在我的HTML代码中找到我的错误，进行javascript测验

2 个答案: