Uncaught TypeError无法设置null的属性'src' [英] Uncaught TypeError cannot set property 'src' of null

问题描述

因此，在我的新网站中，我试图让图片每隔5秒切换一次使用setInterval函数。这似乎工作，但是我有问题无法设置null的属性src。

  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的id来获取元素完成加载，但我已经有一个window.onload，所以我不知道该怎么做。另外，如果我创建一个包含setInterval和img变量的init（）函数，页面将会冻结。

有什么想法？

问题是，您只有两个元素（0和1）访问数组的元素 2 。

但脚本中还存在一个逻辑错误：您在哪里存储当前可见图像的索引？您需要一个包含该索引的全局变量。

  var currentIndex = 0; 
函数changeImage（）{
 //在循环中切换currentIndex 
 currentIndex ++; 
 if（currentIndex> = images.length）
 currentIndex = 0; 
 
 var img = document.getElementById（img）; 
 img.src = images [currentIndex]; 
 
 
 document.onload = function（）{
 setInterval（changeImage，5000）; 
} 
  

我已将 img 变量加入到函数中，以便在文档加载完成后的5秒内赋值。

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

So on my new website in google chrome, I am trying to make the images switch every 5 seconds using a setInterval function. This seems to work, however I have the problem cannot set property src of 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);

I know the problem is that I am trying to get the element with an id of img before the page is done loading, but I've already got a window.onload, so i don't know what to do. Also, if i make an init() function containing the setInterval and the img variable, the page freezes.

Any ideas?

解决方案

The problem is that you access element 2 of an array with only two elements (0 and 1).

But there is also a logical error in your script: Where do you store the index of the currently visible image? You need a global variable which holds that index.

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);
}

I've moved the img variable into the function so that it is assigned after five seconds when the document has loaded.

Just to clear things up: JavaScript is an event-based programming language. That means that the slideshow-change code is executed every time the interval fires, does some work (switch to the next slide) and then is done, so that the browser can render the page. If you iterate through the slides in a loop, there is no way for the browser to show the new slide because the script is still executing between the slides. The solution is what I've posted: Define a global variable that replaces the loop variable, and increment it every time the next slide is to be shown.

这篇关于Uncaught TypeError无法设置null的属性'src'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！