我的 javascript 处理幻灯片图像横幅时哪里出错了？答案

【问题标题】：Where did I go wrong with my javascript handling my slideshow image banner?我的 javascript 处理幻灯片图像横幅时哪里出错了？
【发布时间】：2017-03-22 14:39:07
【问题描述】：

这是我目前所拥有的，这是一个非常基本的幻灯片图像横幅，位于我的 html 标题标签内。基本上，每 3 秒，我就会出现一个新图像。我计划将它用于我现在正在进行的模拟练习，但不幸的是，Javascript 出现了问题。至少，我是这么认为的。图片横幅不会继续浏览图片。它只贴在一张照片上，没有其他地方。没有其他图片出现。这是我现在在控制台日志中遇到的错误。

Uncaught TypeError: Cannot read property 'setAttribute' of null. at changeImage (slideshow.js:7)

这是我现在拥有的 HTML。

<html>
<head>
    <title>Kenneth's Slide Show Demonstration</title>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='slideshow.css'>
    <script src="slideshow.js"></script>
</head>
<body>
<div id="wallpaper"><img src="ferrari-logo0.jpg" id="ferrari" alt="ferrari logo"/></div>
</body>
</html>

现在是 CSS。

body {
    padding:0;
    margin:0;
}
#wallpaper {
    height:300px;
    width:100%;
    margin:auto;
    background:rgba(0,0,0,0.7);
    border-bottom:dashed black 1px;
    transition:all 0.5s ease-in-out;
}
#ferrari {
    margin-left:auto;
    margin-right:auto;
    display:block;
    height:250px;
    width:400px;
    padding-top:20px;
}
#wallpaper:hover {
    background:rgba(0,0,0,1);
}

然后这是我制作的 Javascript。

var myImage = document.getElementById('ferrari');
var imageArray=['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];

var imageIndex=0;

function changeImage() {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
};

var intervalHandle = setInterval(changeImage(),4000);

function changeImage();

我哪里做错了？如果我可以提出特殊要求，我想要直接的 Vanilla javascript。我知道 Jquery 很受欢迎，但我现在还没有研究它。

【问题讨论】：

预期输出是什么？
我哪里出错了你能详细说明一下吗？当然，您不希望我们查看所有这些代码并尝试找出错误（如果有的话）。举一个问题的具体例子。检查浏览器的控制台以查看是否存在任何错误
抱歉措辞不佳，我的意思是图像仍然停滞不前。第一张图片出现了，但只是粘住了，横幅不会在图像阵列中不断旋转。

标签： javascript html css

【解决方案1】：

函数changeImage()的setInterval不需要圆括号；

var imageArray = ['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];

var imageIndex = 0;

function changeImage() {
    var myImage = document.getElementById('ferrari');
    if (myImage) {
        myImage.setAttribute("src", imageArray[imageIndex]);
        imageIndex++;
        if (imageIndex >= imageArray.length) {
            imageIndex = 0;
        }
    }
};

var intervalHandle = setInterval(changeImage, 4000);

试试看。您必须传递一个函数，而不是调用它。

【讨论】：

这是我遇到的错误 Uncaught TypeError: Cannot read property 'setAttribute' of null
试着把 var myImage = document.getElementById('ferrari');在 changeImage() 函数内部。你在哪里调用你的脚本？我的意思是添加为或加载为
这个错误可能是脚本执行时没有加载你的html。这就是 myImage 为空的原因
哦，我在此之上添加了另一个功能。 window.onload = function() { changeThisShit(); };

【解决方案2】：

您正在页面头部加载 JavaScript，因此当您的 JS 运行时，ferrari 元素尚不存在。 getElementById 如果没有找到您提供的 id 元素，则返回 null。因此，您实际上是在尝试执行null.setAttribute("src", imageArray[imageIndex]);。由于null 没有setAttribute 方法，您会收到一条错误消息，告诉您Cannot read property 'setAttribute' of null。

将你的脚本标签移动到ferrari 元素下面应该可以解决这个问题。出于其他与性能相关的原因，load your JS as low in the page as you can 已成为最佳实践。如果您将代码包装在 DOMContentLoaded 事件处理程序中，您还可以将脚本标记保留在原处。

【讨论】：

【解决方案3】：

你只需要调用changeImage，像这样setInterval(changeImage,4000)也已经定义了changeImage()，你只需要调用它。

这是一个工作示例。

document.addEventListener("DOMContentLoaded", function() {
var myImage = document.getElementById('ferrari');
var imageArray=['http://placehold.it/350x150?text=1', 
				'http://placehold.it/350x150?text=2', 
				'http://placehold.it/350x150?text=3', 
				'http://placehold.it/350x150?text=4'
			   ];

var imageIndex=0;

function changeImage() {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

var intervalHandle = setInterval(changeImage, 4000);

changeImage();	
	

});

body {
    padding:0;
    margin:0;
}
#wallpaper {
    height:300px;
    width:100%;
    margin:auto;
    background:rgba(0,0,0,0.7);
    border-bottom:dashed black 1px;
    transition:all 0.5s ease-in-out;
}
#ferrari {
    margin-left:auto;
    margin-right:auto;
    display:block;
    height:250px;
    width:400px;
    padding-top:20px;
}
#wallpaper:hover {
    background:rgba(0,0,0,1);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Wallpapers</title>
</head>
<body>
<div id="wallpaper">
	<img src="" id="ferrari" alt="ferrari logo"/></div>
</body>
</html>

最佳做法是在加载 html 后加载脚本，因此请将 html 放在结束正文标记 </body> 之前，或使用 DOMContentLoaded https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded

【讨论】：