Maison > Questions et réponses > le corps du texte
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>
P粉0266659192024-03-31 12:45:12
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);
}