Javascript getElementById for循環

-3

這裏我在打印某些基於條件的圖像時遇到問題。出於這個原因，我使用了一個for循環，並在裏面使用了getElementById。但問題是它只是最後一個。Javascript getElementById for循環

我想基於數組條件打印五次。

下面是示例代碼

var arr = ["false", "false", "true", "false", "true"]; 
 
for (var i = 0; i < arr.length; i++) { 
 
    console.log("Hello") 
 
    if (arr[i] === "true") { 
 

 
    console.log("true") 
 
    document.getElementById("imageId").src = "green.png"; 
 
    } else 
 
    document.getElementById("imageId").src = "red.png"; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="col-sm-2"> 
 
     <div> 
 
      <img id="imageId" src="" alt="HTML5 Icon" style="width:50px;height:50px;"> 
 
     </div> 
 
     <span>server1</span> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-01-16 asm morshed

你有什麼問題？ –

您正在覆蓋src 5次？ – sinisake

它只取最後一個值，因爲這是循環數組時循環的最後一個值。你期望發生什麼？ –

你只有一個形象，你改變這一形象的src五倍。

圖像的src將永遠是基於數組中的最後元素。

如果要顯示所有5張圖像，則不能使用單個image元素，但必須至少使用5.請記住，在這種情況下，它們都需要唯一的ID。

或者，您可以使用多個具有相同類別的圖像元素。或者您可以爲陣列中的每個元素創建圖像。

選擇是你的，重要的是一張圖片一次只能顯示一張圖片。

來源

2017-01-16 11:55:15

非常感謝您提供豐富的信息。 –

如果是這種情況，您可能需要動態創建img元素。請參閱下面的代碼。

var arr = ["false", "false", "true", "false", "true"]; 
 
for (var i = 0; i < arr.length; i++) { 
 
    console.log("Hello"); 
 
    var img= document.createElement('img'); 
 
    if (arr[i] === "true") { 
 
    console.log("true");  
 
    img.src = "green.png"; 
 
    } else 
 
    img.src = "red.png"; 
 
    document.getElementById("imageId").appendChild(img); 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="col-sm-2"> 
 
     <div> 
 
     <div id="imageId"></div> 
 
     </div> 
 
     <span>server1</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-01-16 11:55:18

就是這樣。非常感謝您的幫助。 –

@asmmorshed很高興幫助你。如果您不介意，請接受答案。謝謝。 –

你的循環運行五次。每次它操縱相同<img>標記的src屬性時。

在第一次運行的SRC將被設置爲「red.png」
同爲第二次運行
在第三次運行相同的屬性將與「green.png」被覆蓋。
現在它將被設置爲「red.png」
它將被設置爲「green.png」。因此，最後將「green.png」

如果你想操縱一個循環不止一個<img>標籤使用的標籤ID的陣列，動態地創建他們或剛剛與增量變動他們的名字（我髒，快速的解決方案）。

var arr = [false, false, true, false, true]; 
 
    for (var i = 0; i < arr.length; i++) { 
 
    console.log(arr[i]); 
 
    if (arr[i]) { 
 
     document.getElementById("imageId" + i).src = "green.png"; 
 
     document.getElementById("imageId" + i).alt = "green.png"; 
 
    } else { 
 
     document.getElementById("imageId" + i).src = "red.png"; 
 
     document.getElementById("imageId" + i).alt = "red.png"; 
 
    } 
 
    }

<img id="imageId0" src="" alt="HTML5 Icon" style="width:50px;height:50px;"> 
 
<img id="imageId1" src="" alt="HTML5 Icon" style="width:50px;height:50px;"> 
 
<img id="imageId2" src="" alt="HTML5 Icon" style="width:50px;height:50px;"> 
 
<img id="imageId3" src="" alt="HTML5 Icon" style="width:50px;height:50px;"> 
 
<img id="imageId4" src="" alt="HTML5 Icon" style="width:50px;height:50px;">

來源

2017-01-16 12:04:56 Gehtnet

非常感謝您的回覆。它有助於理解如何思考。 –

Javascript getElementById for循環

回答

相關問題