52 images in Array JS

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>

Does this answer your question? [Get list of filenames in folder with Javascript](https://stackoverflow.com/questions/31274329/get-list-of-filenames-in-folder-with-javascript) — Sfili_81, Jan 20 '23 at 11:28
Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I'm afraid it's not very clear what you're asking. You seem to already have an array of filenames. Are you asking how to avoid having to have that array? Or how to use that array to create images with a common path? Or something else? — T.J. Crowder, Jan 20 '23 at 11:29
@Sfili_81 - Not at all, you can use JavaScript in the browser, on the server, on a workstation, etc., etc. JavaScript is a *language*, not a runtime environment. (In fact, JavaScript was originally developed as a server-side language.) — T.J. Crowder, Jan 20 '23 at 11:30
If you are in the Browser, you cannot serve files from the file system directly. You need an http server that serves those files, and then use the http url to those files as src value — Stiegi, Jan 20 '23 at 11:30
_"what I'm doing wrong"_ - for starters, a) you are trying to assign a whole array as the content of a single element's `src` attribute; and b) the element whose `src` you try to set, isn't even an image element to begin with, but a `div` (which has no `src` attribute.) — CBroe, Jan 20 '23 at 11:41

score 0 · Answer 1 · answered Jan 20 '23 at 11:44

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>

52 images in Array JS

1 Answers1