I am studying IT Assistant for 1 year and currently we have to write a card game using JavaScript HTML and CSS.
My question is: How do I put 52 cards into an array in JS, just provide the path to the folder where all the images for those cards are placed, and then display them?
I tried the following code, which I wrote myself; but they only show up in the console. It would be enough if you just tell me what I'm doing wrong, which causes the image on the page not to display:
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Your element is not an image element with ID Spieler1. That's why you can't set its src attribute.
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