javascript - 未捕获的 TypeError 无法设置 null 的属性 'src'

Question

所以在我的new website在谷歌浏览器中，我试图使用 setInterval 函数让图像每 5 秒切换一次。这似乎可行，但是我遇到了无法将属性 src 设置为 null 的问题。

var images = new Array();
images[0] = "/images/grilled-chicken-large.png";
images[1] = "/images/sizzly-steak.png";
var img = document.getElementById("img");

function changeImage() {
     for (var i = 0; i < 3; i++) {
        img.src = images[i];
        if (i == 2){i = i - 2;};
     }
}

window.onload=setInterval("changeImage()", 5000);

我知道问题是我试图在页面加载完成之前获取 id 为 img 的元素，但我已经有一个 window.onload，所以我不知道该怎么做。此外，如果我创建一个包含 setInterval 和 img 变量的 init() 函数，页面会卡住。

有什么想法吗？

Answer 1

问题是您访问只有两个元素(0 和 1)的数组的元素 2。

但是你的脚本也有一个逻辑错误:你把当前可见图像的索引存放在哪里？您需要一个保存该索引的全局变量。

var currentIndex = 0;
function changeImage() {
    // Switch currentIndex in a loop
    currentIndex++;
    if (currentIndex >= images.length)
        currentIndex = 0;

    var img = document.getElementById("img");
    img.src = images[currentIndex];
}

document.onload = function() {
    setInterval(changeImage, 5000);
}

我已将 img 变量移动到函数中，以便在文档加载后五秒后对其进行赋值。

澄清一下:JavaScript 是一种基于事件的编程语言。这意味着每次触发间隔时都会执行幻灯片更改代码，执行一些工作(切换到下一张幻灯片)然后完成，以便浏览器可以呈现页面。如果循环遍历幻灯片，浏览器将无法显示新幻灯片，因为脚本仍在幻灯片之间执行。解决方案是我发布的:定义一个替换循环变量的全局变量，并在每次显示下一张幻灯片时递增它。