Question

我是一名学生，我的HTML代码出现问题。我的任务是使用我的代码中的数组创建一个红绿灯序列，在每次单击按钮后推进红绿灯序列。它通过操作网页上的单个图像来完成此操作。

但是，按下按钮后，它只会将灯光更改为'RedAmberLight'状态。代码已粘贴在下面，任何帮助将不胜感激：

<!DOCTYPE html>
<html>
<body>

<h1>Changing Traffic Lights w/ Arrays</h1>

<img id="trafficLight" src="RedLight.jpg">
<button type="button" onclick="lightChange()">Change Traffic Lights</button>

<script>

var fileArray = ["RedLight.jpg",
                 "RedAmberLight.jpg",
                 "GreenLight.jpg",
                 "AmberLight.jpg"];

function lightChange() {
  var lightColour = trafficLight.src

  if (lightColour = fileArray[0]) {
     lightColour = fileArray[1];
  } else if (lightColour = fileArray[1]) {
     lightColour = fileArray[2];
  } else if (lightColour = fileArray[2]) {
     lightColour = fileArray[3]; 
  } else {
     lightColour = fileArray[0];
  }
  var light = document.getElementById('trafficLight');
  light.src = lightColour
}

</script>

</body>
</html>

Answer 1

问题：

if (lightColour = fileArray[0]) {

这是一项任务而非测试。

使用double / tripple =：lightColour == fileArray[0])

Answer 2

您需要使用==或===运算符而不是=来比较值。否则，您只需分配值并测试结果是“falsy”还是“truthy”（用于测试空字符串的JavaScript概念，0等等）。

if (lightColour === fileArray[0]) {
   lightColour = fileArray[1];
} else if (lightColour === fileArray[1]) {
   lightColour = fileArray[2];
} else if (lightColour === fileArray[2]) {
   lightColour = fileArray[3]; 
} else {
   lightColour = fileArray[0];
}

Answer 3

if语句怎么样？看看这个。

var fileArray = [
  "RedLight.jpg",
  "RedAmberLight.jpg",
  "GreenLight.jpg",
  "AmberLight.jpg"
];

function lightChange() {
  var lightColour = trafficLight.innerHTML;
  var lightIndex = fileArray.indexOf(lightColour);
  lightColour = fileArray[ lightIndex+1 == fileArray.length ? 0 : lightIndex+1];

  var light = document.getElementById('trafficLight');
  light.innerHTML = lightColour;
}

<h1>Changing Traffic Lights w/ Arrays</h1>

<div id="trafficLight">RedLight.jpg</div>
<button type="button" onclick="lightChange()">Change Traffic Lights</button>

使用img标记，它应该如下所示。我使用getAttribute('src')而不是src，为什么？因为src会返回整个网址，例如http://localhost/RedLight.jpg。

var fileArray = [ //Array of files name, obviously
  "RedLight.jpg",
  "RedAmberLight.jpg",
  "GreenLight.jpg",
  "AmberLight.jpg"
];

function lightChange() { // That function tho
  var trafficLight = document.getElementById('trafficLight'); // Get element with id 'trafficLight'
  var lightColour = trafficLight.getAttribute('src'); // Get value of attribute 'src' from 'trafficLight' element
  var lightIndex = fileArray.indexOf(lightColour); // Get index of value from fileArray based on actually selected light
  lightColour = fileArray[ lightIndex+1 == fileArray.length ? 0 : lightIndex+1]; // Set new lights from array by checking if new index is equal to array lenghth, if it is, then select first index from array, otherwise go to next value from array by selecting actually selected index+1

  trafficLight.src = lightColour; // Set new src value
}

<h1>Changing Traffic Lights w/ Arrays</h1>

<img id="trafficLight" src="RedLight.jpg">
<button type="button" onclick="lightChange()">Change Traffic Lights</button>

为什么我的代码总是选择相同的数组项？

3 个答案: