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>