我的HTML按钮没有在Javascript中运行

My HTML Button is not running in Javascript

本文关键字：Javascript 运行 HTML 按钮 我的      更新时间：2023-09-26

好的，所以我正在做GCSE课程，我的脚本遇到了问题

问题是我的脚本按钮无法使用JavaScript

这是剧本；

</head>
<h1>Traffic Light Sequence</h1>
<img id="Red.jpg" src="Red.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
var list=["Red.jpg","Amber.jpg","Green.jpg","Amber.jpg"]
var count:0,1
function changeLights() {
var image = document.getElementById('Red.jpg');
if list=0 {
    image.src=list[0];
if list=1 {
    image.src=list[1];
} else if list=2 {
    image.src=list[2];
} else > 3 {
    image.src=list[3];
}
}
</script>
</body>
</html>

我已经清楚地制作了这个按钮，创建了一个onClick，并用它打开了一个函数

这里有很多错误。。。

  • onclick属性中不需要javascript:
  • 声明list变量后忘记了分号
  • 我甚至不知道这是什么：除了语法错误之外的var count:0,1。也许你的意思是var count = 0;？（还忘了分号。）但你从来没有使用这个变量，所以你甚至不需要它
  • 您忘记了这里的分号：document.addEventListener("click")，但您甚至不需要这行代码，因为它什么都不做
  • if条件需要括号，并且需要使用==（相等）而不是=（赋值）：if (list==0)
  • 您忘记了第一个if块之后的关闭}
  • 这是一个语法错误：else > 3 else只是一个else，没有与之相关的条件
  • 此外，您还要检查哪些if条件？列表永远不会等于整数。我甚至都不知道该怎么建议。用通俗的英语来说，你要求if检查什么

我可能错过了更多。。。

看看这段代码(https://jsfiddle.net/6d3tkm6y/)：

<h1>Traffic Light Sequence</h1>
<img id="Red.jpg" src="Red.jpg">
<h2 id="display">Red</h2>
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
  var list=["Red.jpg","Amber.jpg","Green.jpg","Amber.jpg"];
  var index = 0;
  function changeLights() {
    var image = document.getElementById('Red.jpg');
    var display = document.getElementById('display');
    index = (index + 1) % 4;
    image.src = list[index];
    display.innerHTML = list[index];
  }
</script>

我的代码中的display元素只是在那里，这样你就可以看到灯光发生了什么，因为我没有你正在使用的图像文件。

您不需要任何if..else if语句。您只需使用index在数组上循环即可。一旦索引达到4，% 4就会自动将其包裹起来（所以您只需要将其增加1）。这样，你的函数基本上减少到只有3行。

此外，您肯定应该更多地了解一些通用的javascript语法；）

您的代码有大量语法和逻辑错误。无论如何，在这里它被更正，加上文本字段。

<h3>Traffic Light Sequence</h3>
<img id="Red.jpg" src="Red.jpg">
<div id="example">
  Red.jpg
</div>
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
  var list = ["Red.jpg", "Amber.jpg", "Green.jpg", "Amber.jpg"]
  var count = 0;
  function changeLights() {
    count+=1;
    if(count==4)
      count = 0;
    var image = document.getElementById('Red.jpg');
    image.src = list[count];
    //extra code because I don't have images
    var example = document.getElementById('example');
    example.innerHTML = list[count];
  }
</script>

Fiddle。

相关文章：