0

我有以下似乎可以工作的小脚本，但其中两个图像似乎已损坏。当我右键单击并加载为新选项卡时，它们会加载：

var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [        
        'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
        'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
        'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
    ];

    function nextPic() {
      counter += 1;
      if (counter > myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />



    
 
</body>
</html>

4

2 回答 2

2

只需将这条线移到你的函数中，这样你就不会在它被加载到 DOM 之前nextPic()试图抓住它。div

function nextPic() {
  var target = document.getElementById('target');
  ...

有时<script defer>会自动等待 DOM 加载，有时则不会。它是 JavaScript。就是这样。

推迟

此布尔属性设置为向浏览器指示脚本将在文档被解析之后但在触发 DOMContentLoaded 之前执行。如果该src属性不存在（即对于内联脚本），则不得使用该属性，在这种情况下，它将不起作用。要为动态插入的脚本实现类似的效果，请async=false改用。

这是关于脚本加载的一个很好的背景故事。

于 2017-08-28T20:25:30.400 回答
0 

var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [        
        'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
        'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
        'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
    ];

    function nextPic() {
      counter += 1;
      if (counter == myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />



    
 
</body>
</html>

于 2017-08-28T20:31:10.063 回答