使用javascript更新html中的照片

Question

//--------------------javascript code------------------ 
var counter = 0; 
var myImage = document.getElementById("newCode"); 
var photos = ["Face1.jpg", "Face2.jpg", "Face3.jpg", "Face4.jpg", 
      "Face5.png", "Face6.png", "Face7.png"]; 

function changeImage() { 
myImage.setAttribute("src", photos[counter]); 
console.log(counter); 
counter++; 
if (counter >= photos.length) 
    counter = 0; 
} 

setInterval(changeImage, 1000); 

//----------------portion of HTML code-------------------- 
<span id="newCode"> 
     <img src="Face6.png" alt="Happy Face"> 
</span> 

我是JavaScript新手，並試圖創建代碼，用於根據文件夾中的其他圖像旋轉顯示在網頁上的圖像。問題是，我的javascript代碼不會改變其他人的圖像，只有硬編碼到html中的那個，「Face6.jpg」被顯示。 我已檢查並且兩個文件（index.html和javascipt文件）都正確鏈接，並且該數組的圖片位於根文件夾中正確的位置（使用正確的拼寫）。 任何想法:(

Answer 1

在您的標記，ID爲「newCode」的元素是不的形象，這是包含圖像的跨度。

設置一個ID，以您的圖像元素並使用它：

<span> 
    <img id="newCode" src="Face6.png" alt="Happy Face"> 
</span> 

Answer 2

這個工作對我來說： http://jsbin.com/yuqerefowi/edit?html,js,console,output

var counter = 0; 
 
var myImage = document.getElementById("newCode").querySelector('img'); 
 
var photos = [ 
 
    "Face1.jpg", 
 
    "Face2.jpg", 
 
    "Face3.jpg", 
 
    "Face4.jpg", 
 
    "Face5.png", 
 
    "Face6.png", 
 
    "Face7.png" 
 
]; 
 

 
function changeImage() { 
 
    myImage.setAttribute("src", photos[counter]); 
 
    console.log(counter); 
 
    counter++; 
 
    if (counter >= photos.length) { 
 
    counter = 0; 
 
    } 
 
} 
 

 
setInterval(changeImage, 1000);

<span id="newCode"> 
 
    <img src="Face6.png" alt="Happy Face"> 
 
</span>

Answer 3

這一行的JavaScript你所得到的<span>的：

var myImage = document.getElementById("newCode"); 

然後試圖在其上設置src屬性：

myImage.setAttribute("src", photos[counter]); 

但你實際上是在尋找圖片。你可以做的是將id="newCode"移動到：

<img src="Face6.png" alt="Happy Face" id="newCode">。

例如：

var counter = 0; 
 
var myImage = document.getElementById("newCode"); 
 
var photos = ["Face1.jpg", "Face2.jpg", "Face3.jpg", "Face4.jpg", 
 
       "Face5.png", "Face6.png", "Face7.png"]; 
 

 
function changeImage() { 
 
    myImage.setAttribute("src", photos[counter]); 
 
    counter++; 
 
    if (counter >= photos.length) 
 
    counter = 0; 
 
} 
 
setInterval(changeImage, 1000);

<span> 
 
    <img src="Face6.png" alt="Happy Face" id="newCode"> 
 
</span>

Answer 4

您選擇<span>代替<img>。要選擇內<img>使用：

var myImage=document.getElementById("newCode").getElementsByTagName("img")[0];