我无法理解阻止我运行某些 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/