Question

我无法理解阻止我运行某些JavaScript代码的问题。单击按钮后，应该更改图像，该图像保存在阵列中。图像与html文档位于同一文件夹中，因此路径中没有错误。

虽然它可以在Firefox上运行，但不能在Chrome和Edge上运行。

我的Chrome控制台说无法设置null的'src'属性。

我的Edge控制台说无法设置未定义或空引用的属性'src'。

这是引起问题的行：

imgElem.src = imgArr[a];

这是整个代码：

"use strict"
var a = 0;
var imgArr = ["sl0.jpg", "sl1.jpg", "sl2.jpg"];
var imgElem = document.getElementById("img");

function changeImg() {
  imgElem.src = imgArr[a];

  if (a < imgArr.length - 1) {
    a++;
  } else {
    a = 0;
  }
}

<img id="img" src="sl0.jpg" width="200px" />
<br /><button type="button" onclick="changeImg()">Click me</button>

如果您能解释这个问题，我将不胜感激。源显然不是null，因为它引用数组中的“对象”。

编辑：根据AlbertoSingaglia的建议，我尝试在控制台中找到 imgElem 。它在Firefox中找到它，而它在Chrome中找不到它。

Answer 1

您的脚本在html标记中的何处？在头上吗？

这可能是问题所在，因为在这种情况下，它将在呈现html之前运行。

尝试以下方法之一：
1）将脚本标签移到正文结束之前。

<body>
    <!-- markup -->
    <script></script>
</body>

或

2）在函数changeImg（）内部移动行var imgElem = document.getElementById("img");

喜欢：

"use strict"
var a = 0;
var imgArr = ["sl0.jpg", "sl1.jpg", "sl2.jpg"];


function changeImg() {
  var imgElem = document.getElementById("img");
  imgElem.src = imgArr[a];

  if (a < imgArr.length - 1) {
    a++;
  } else {
    a = 0;
  }
}

无法设置null的'src'属性-JavaScript

1 个答案: