forループのJavascript getElementById

Question

ここでは、条件に基づいてイメージを印刷する際に問題が発生しています。そのため私はforループを使用し、getElementByIdの内部に使用しました。しかし、問題は最後のものだけがかかることです。

配列条件に基づいて5回印刷したいと思います。ここで

は、サンプルコード

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>

Answer 1

は、あなたが1つの画像だけを持って、あなたはこの画像のsrc 5回変更です。

イメージのsrcは、配列内の最後の要素に基づくものです。

5つの画像すべてを表示する場合は、1つのimage要素を使用することはできません。少なくとも5を使用する必要があります。これらのすべてには、この場合は一意のIDが必要です。

または、同じクラスの複数のイメージ要素を使用できます。または、配列内のすべての要素のイメージを作成できます。

選択肢はあなたですが、重要なのはです。一度に1枚の画像しか表示できません。

Answer 2

このような場合は、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>

Answer 3

あなたのループが5回実行されます。同じ<img>タグのsrc属性を操作する度にsrcが同じ属性が「green.png」で上書きされます。3回目の中でセカンドラン

ため、同じ「red.png」

に設定されます。最初の実行で

2. これは "red.png"に設定されます
3. "green.png"に設定されます。あなたは、タグIDの配列を使用してループ内で複数の<img>タグを操作動的に作成するか、単に増分変数でそれらを名前を付けたいのであれば、最終的には

を「green.png」されます（私の汚い、速い解決策）。

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;">