Array JS 中的 52 张图片

Question

I'm studying IT-assistant for 1 year and currently we have to program a card game in JavaScript HTML and CSS.

My problem is: how can I put 52 cards into an array in JS supplying only the path of the folder where I have put all the images of these cards, and then display them?

I tried with the code below, which I have written myself; but they will only show in the console. It would be enough if you just tell me what I'm doing wrong, that causes the images on the page to not be displayed:

 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

Your element is not an image element with id Spieler1. Thats why you cant set it's src property.

 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); }

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