52 images dans Array JS

Question

J'étudie Assistant Informatique depuis 1 an et actuellement nous devons écrire un jeu de cartes en utilisant JavaScript HTML et CSS.

Ma question est la suivante : comment puis-je mettre 52 cartes dans un tableau en JS, simplement fournir le chemin d'accès au dossier où sont placées toutes les images de ces cartes, puis les afficher ?

J'ai essayé les codes ci-dessous, que j'ai écrits moi-même, mais ils n'apparaissent que dans la console. Il suffirait que vous me disiez ce que je fais de mal, ce qui empêche l'image sur la page de s'afficher :

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

Votre élément n'est pas un élément d'image avec l'ID Spieler1. C'est pourquoi vous ne pouvez pas définir son attribut 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