52 imej dalam Array JS

Question

Saya sedang belajar Pembantu IT selama 1 tahun dan pada masa ini kami perlu menulis permainan kad menggunakan JavaScript HTML dan CSS.

Soalan saya ialah: Bagaimanakah saya boleh meletakkan 52 kad ke dalam tatasusunan dalam JS, cuma berikan laluan ke folder tempat semua imej kad ini diletakkan, dan kemudian paparkannya?

Saya mencuba kod di bawah, yang saya tulis sendiri; tetapi ia hanya muncul dalam konsol. Cukuplah jika anda memberitahu saya apa yang saya lakukan salah, yang menyebabkan imej pada halaman tidak dipaparkan:

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

Elemen anda bukan elemen imej dengan ID Spieler1. Itulah sebabnya anda tidak boleh menetapkan atribut srcnya.

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