Question

我试图在四个图像之间按顺序循环一个红色正方形然后是橙色然后是绿色然后是橙色然后是红色并重复。它说在chrome控制台中没有定义changeImage（）。谢谢你的帮助这是代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img id="myImage" src="red.gif" height="10%">

<button type="button" onclick="changeImage()">Click Me to change light!</button>

<script>
function changeImage() {
 var image = document.getElementById("myImage");
if (image.src.match("red")) {
    image.src = "amber1.gif";
    alert('Get Ready');
} else if (image.src.match("amber1")) {
    image.src = "green.gif";
    alert('Go');
} else if (image.src.match("green")) {
    image.src = "amber2.gif";
    alert('Slow');
} else {
    image.src = "red.gif";
    alert('Stop');
}
</script>
</body>
</html>

Answer 1

你在脚本块的末尾错过了一个右括号。如果你剪掉了功能体，你可以这样做：

function changeImage() {
    ...

而不是：

function changeImage() {
    ...
}

Answer 2

好吧，我在chrome中测试过，并且缺少}来关闭该功能。

一旦我加了它，就行了。当我点击按钮时，我收到了“Get Ready”消息并尝试加载amber1.gif

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img id="myImage" src="red.gif" height="10%">

<button type="button" onclick="changeImage()">Click Me to change light!</button>

<script>
function changeImage() {
 var image = document.getElementById("myImage");
  if (image.src.match("red")) {
    image.src = "amber1.gif";
    alert('Get Ready');
  } else if (image.src.match("amber1")) {
    image.src = "green.gif";
    alert('Go');
  } else if (image.src.match("green")) {
    image.src = "amber2.gif";
    alert('Slow');
  } else {
    image.src = "red.gif";
    alert('Stop');
  }
} // <--- This one is missing
</script>
</body>
</html>

需要什么来纠正这个JavaScript

2 个答案: