Question

我正在

未捕获的TypeError：无法读取属性＆＃39; getAttribute＆＃39;在浏览器控件中的changeImage函数中为null。

但幻灯片显示效果很好。不知道为什么这个错误消息显示。任何人都可以告诉它为什么会发生。

我的代码。

HTML：

<img src="images/1.jpg" alt="first Image" id="image" style="width:150px; height:150px;">    
<br/>

<input type="button" value="start the slide" onclick="startSlideShow()">    
<input type="button" value="end the slide" onclick="stopSlideShow()">

JS：

var interValId;
function startSlideShow() {
  setInterval(changeImage, 500);
}

function stopSlideShow() {
  clearInterval(interValId);
}

function changeImage() {
  var imageSource = document.getElementById("image").getAttribute("src");
  var currentImageNumber = imageSource.substring(imageSource.lastIndexOf("/") + 1, imageSource.lastIndexOf("/") + 2);

  if (currentImageNumber == 7) {
    currentImageNumber = 0;
  }
  document.getElementById("image").setAttribute("src", "images/" + (Number(currentImageNumber) + 1) + ".jpg");
}

Answer 1

正是它所说的

(null).getAttribute("src")

因此，无论你在哪里打电话changeImage()（你没有在你的问题中证明这一点），DOM中没有这样的元素，或者DOM还没有准备好被操纵

DOM尚未就绪，但changeImage()被称为
DOM准备就绪
Interval现在会触发另一个changeImage()
找到元素
滑块现在可以使用，但您仍然在控制台

故障安全是最好的：

function changeImage() {
  var image = document.getElementById("image");
  if (!image) return; // failsafe

  // other code here

}

并始终将<script>右放在结束</body>标记之前。

此外，为了分离关注点和更好的代码体系结构，请尝试放弃内联style和script类似onclick以获得更好的替代方案，例如{J}代码，直接来自您的JS代码：

Element.addEventListener

HTML：

var btnPlay = document.getElementById("play");
btnPlay.addEventListener("click", startSlideShow);

未捕获的TypeError：无法读取属性＆＃39; getAttribute＆＃39;在changeImage中为null

1 个答案: