Question

我在JavaScript中工作，我需要创建一个交通灯，每次点击按钮时都会改变颜色。我花了很长时间在它上面，我仍然无法使它工作。有人可以帮我看看，并给我一些如何让它工作的提示。

<!DOCTYPE html>
  <html>
    <body>
      <img id="myImage" src="Light1.gif" width="500" height ="350">
      <p>
        <button onclick="myFunction()">Change Light</button>
        <p>
        <p>Click Change Light to change the traffic light.</p>
        <script>
          var image = document.getElementById('myImage');
          var p1 = new Image();
          p1.src = "Light1.gif";

          var p2=  new Image();
          p2.src = "Light2.gif";

          var p3 = new Image();
          p3.src = "Light3.gif";

          var p4 = new Image();
          p4.src = "Light4.gif";

          var imgArray = [p1,p2,p3,p4];
          var n = 0;

          function myFunction(){
            n = n + 1;
            if (n === imgArray.length) {
              n = 0
            }
            image.src = imgArray[n];
          }
        </script>
      </body>
    </html>

Answer 1

首先，您的代码中存在语法错误，您需要在发布之前进行检查。大多数行都缺少行终止符;，并且还有额外的大括号。

对于此问题，您正在创建Image类型的对象，然后将其作为源映射到原始图像元素，这将无效。您可以创建文本值数组（图像名称），如下所述。

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <img id="myImage" src="Light1.gif" width="500" height="350">
  <p>
    <button onclick="myFunction()">Change Light</button>
    <p>
      <p>Click Change Light to change the traffic light.</p>
      <script>
        var image = document.getElementById('myImage');
        var p1 = "Light1.gif";
        var p2 = "Light2.gif";
        var p3 = "Light3.gif";
        var p4 = "Light4.gif";
        var imgArray = [p1, p2, p3, p4];
        var n = 0;

        function myFunction() {
          n = n + 1;
          if (n == imgArray.length) {
            n = 0
          };
          image.src = imgArray[n];
        }
      </script>
</body>

</html>

＆＃13;

专业提示：缩进代码以提高可读性

Answer 2

如果我理解正确，我认为您正在尝试做以下事情：

代码中的更正：

删除额外的右括号<script type="text/javascript"> function grid_SelectionChanged(s,e) { s.GetSelectedFieldValues("ContactName",GetSelectedFieldValuesCallback); } function GetSelectedFieldValuesCallback(values) { selList.BeginUpdate(); try { selList.ClearItems(); for(var i=0;i<values.length;i++) { selList.AddItem(values[i]); } } finally { selList.EndUpdate(); } document.getElementById("selCount").innerHTML=grid.GetSelectedRowCount(); } </script>
追加} image.src = imgArray [n] .src;

.src

var image = document.getElementById('myImage');
var p1 = new Image()
p1.src = "Light1.gif"
var p2=  new Image()
p2.src = "Light2.gif"
var p3 = new Image()
p3.src = "Light3.gif"
var p4 = new Image()
p4.src = "Light4.gif"
var imgArray = [p1,p2,p3,p4];
var n = 0;
function myFunction(){
n = n + 1;
if(n == imgArray.length){
n = 0};
image.src = imgArray[n].src;
}

Answer 3

Spidey说，你正在将图像对象映射到另一个图像的src。

您也可以用以下内容替换循环内的行：

image.src = imageArray [n] .src;

Answer 4

问题在于

var p1 = new Image()
p1.src = "Light1.gif"

您需要的只是

var p1 = "Light1.gif"

请参阅我的CodePen。

确保在行尾记住你的分号

如何让我的JavaScript交通灯工作？

4 个答案: