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

标签 javascript html

我无法理解阻止我运行某些 JavaScript 代码的问题。 单击按钮时,它应该更改保存在数组中的图像。图片和html文档在同一个文件夹,所以路径没有错误。

虽然它适用于 Firefox,但不适用于 Chrome 和 Edge。

我的 Chrome 控制台显示无法将“src”的属性设置为 null

我的 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>

如果您能解释一下问题,我将不胜感激。源显然不为空,因为它引用数组中的“对象”。

编辑:按照 AlbertoSingaglia 的建议,我试图在控制台中找到 imgElem。它在 Firefox 中找到了它,而在 Chrome 中没有找到它

最佳答案

您的脚本位于 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;
  }
}

关于javascript - 无法设置 null 的 'src' 属性 - JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58941589/

相关文章:

javascript - 当项目从java1.4迁移到java1.8时,jsp中TextBox的默认值为 "null"

javascript - 等待 Ajax 调用 DOM 操作完成

javascript - window.addEventListener ("load"中的 Javascript 函数,function() 未定义 - 为什么?

javascript - 谷歌地图 JS API 显示蓝色焦点边框

javascript - 用 JSON 覆盖 localStorage

javascript - 如何在网页初始加载时限制不同选项卡的数据

html - 响应间距的 Bootstrap 问题

javascript - 在一个div中找一个关键字,然后得到冒号后面的字符串,转为变量

java - 从字节数组设置 img src

javascript - SVG 外来对象在更改之前不会显示