Array JS 中的 52 張影像

Question

我正在學習 IT 助理 1 年，目前我們必須使用 JavaScript HTML 和 CSS 編寫紙牌遊戲。

我的問題是：如何在JS中將52張卡片放入一個數組中，僅提供放置這些卡片的所有圖像的資料夾的路徑，然後顯示它們？

我嘗試了下面的程式碼，這是我自己寫的；但它們只會顯示在控制台中。如果您只告訴我我做錯了什麼就足夠了，這會導致頁面上的圖像無法顯示：

function Start() {

  let Karten = ["1h.png", "1k.png", "1ka.png", "1p.png", "2h.png", "2k.png", "2ka.png", "2p.png", "3h.png", "3k.png", "3ka.png", "3p.png", "4h.png", "4k.png", "4ka.png", "4p.png", "5h.png", "5k.png", "5ka.png", "5p.png", "6h.png", "6k.png", "6ka.png", "6p.png", "7h.png", "7k.png", "7ka.png", "7p.png", "8h.png", "k.png", "8ka.png", "8p.png", "9h.png", "9k.png", "9ka.png", "9p.png", "10h.png", "10k.png", "10ka.png", "10p.png", "kingh.png", "kingk.png", "kingka.png", "kingp.png", "queenh.png", "queenk.png", "queenka.png", "queenp.png", "soldath.png", "soldatk.png", "soldatka.png", "soldatp.png"];

  document.getElementById("Spieler1").src = Karten;

  console.log(Karten);

}

<main>

  <div id="alles">
    <div id="Spieler1">
      spieler1
    </div>
    <div id="Spieler2">
      spieler2
    </div>
    <div id="Spieler3">
      spieler3
    </div>
    <div id="Spieler4">
      spieler4
    </div>
  </div>

  <!-- Kartenfeld in der Mitte von jeder Spieler -->

  <div id="Mittel-Container">
    <div class="SP1-Container">
      spieler1
    </div>
    <div class="SP1-Container">
      spieler2
    </div>
    <div class="SP3-Container">
      spieler3
    </div>
    <div class="SP4-Container">
      spieler4
    </div>

    <!-- Knopf zum Starten -->
    <button id="Start-button" onclick="Start()">Start</button>
  </div>

</main>

<footer>

</footer>

Answer 1

您的元素不是 ID 為 Spieler1 的圖像元素。這就是為什麼你不能設定它的 src 屬性。

function Start() {

  let Karten = ["1h.png", "1k.png", "1ka.png", "1p.png", "2h.png", "2k.png", "2ka.png", "2p.png", "3h.png", "3k.png", "3ka.png", "3p.png", "4h.png", "4k.png", "4ka.png", "4p.png", "5h.png", "5k.png", "5ka.png", "5p.png", "6h.png", "6k.png", "6ka.png", "6p.png", "7h.png", "7k.png", "7ka.png", "7p.png", "8h.png", "k.png", "8ka.png", "8p.png", "9h.png", "9k.png", "9ka.png", "9p.png", "10h.png", "10k.png", "10ka.png", "10p.png", "kingh.png", "kingk.png", "kingka.png", "kingp.png", "queenh.png", "queenk.png", "queenka.png", "queenp.png", "soldath.png", "soldatk.png", "soldatka.png", "soldatp.png"];

 var elmnt= document.getElementById("Spieler1");
for (let i = 0; i < Karten.length; i++) {
  var imgKarten=document.createElement("img");
imgKarten.src=Karten[i];
elmnt.appendChild(imgKarten);
}

  console.log(Karten);

}

  

    

      spieler1
    
    

      spieler2
    
    

      spieler3
    
    

      spieler4
    
  

  

  

    

      spieler1
    
    

      spieler2
    
    

      spieler3
    
    

      spieler4
    

    
    Start