Array JS中的52张图片

Question

我正在学习it助理1年，目前我们必须用JavaScript HTML和CSS编程一个纸牌游戏。

我的问题是:我怎么能把52张卡到JS数组中只提供文件夹的路径，我把这些卡的所有图像，然后显示它们?

我尝试了下面的代码，这是我自己写的;但它们只会显示在控制台中。如果你只是告诉我我做错了什么，这将是足够的，导致页面上的图像不显示:

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

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