52 Cards with random generator JS

Im learning JS and the new project Im working on is about a card game with 52 cards. Im trying to mix all the cards to give them out to places where the players are. I try to only deal player one's card first to see if my code works or not but it just shows one random card even though each player has to get 13 cards

function Start() {

  let Karten = new Array();

  Karten[0] = "1h.png";
  Karten[1] = "2h.png";
  Karten[2] = "3h.png";
  Karten[3] = "4h.png";
  Karten[4] = "5h.png";
  Karten[5] = "6h.png";
  Karten[6] = "7h.png";
  Karten[7] = "8h.png";
  Karten[8] = "9h.png";
  Karten[9] = "10h.png";
  Karten[10] = "soldath.png";
  Karten[11] = "queenh.png";
  Karten[12] = "kingh.png";
  Karten[13] = "1k.png";
  Karten[14] = "2k.png";
  Karten[15] = "3k.png";
  Karten[16] = "4k.png";
  Karten[17] = "5k.png";
  Karten[18] = "6k.png";
  Karten[19] = "7k.png";
  Karten[20] = "8k.png";
  Karten[21] = "9k.png";
  Karten[22] = "10k.png";
  Karten[23] = "soldatk.png";
  Karten[24] = "queenk.png";
  Karten[25] = "kingk.png";
  Karten[26] = "1ka.png";
  Karten[27] = "2ka.png";
  Karten[28] = "3ka.png";
  Karten[29] = "4ka.png";
  Karten[30] = "5ka.png";
  Karten[31] = "6ka.png";
  Karten[32] = "7ka.png";
  Karten[33] = "8ka.png";
  Karten[34] = "9ka.png";
  Karten[35] = "10ka.png";
  Karten[36] = "soldatka.png";
  Karten[37] = "queenka.png";
  Karten[38] = "kingka.png";
  Karten[39] = "1p.png";
  Karten[40] = "2p.png";
  Karten[41] = "3p.png";
  Karten[42] = "4p.png";
  Karten[43] = "5p.png";
  Karten[44] = "6p.png";
  Karten[45] = "7p.png";
  Karten[46] = "8p.png";
  Karten[47] = "9p.png";
  Karten[48] = "10p.png";
  Karten[49] = "soldap.png";
  Karten[50] = "queenp.png";
  Karten[51] = "king.png";





  var zufall = Math.floor(Math.random() * Karten.length);

  document.getElementById("Karten").src = Karten[zufall];

}

<div id="alles">
  <div id="Spieler1">
    spieler1
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
    <img id="Karten">
  </div>
  <div id="Spieler2">
    spieler2
  </div>
  <div id="Spieler3">
    spieler3
  </div>
  <div id="Spieler4">
    spieler4
  </div>
</div>

Solution

IDs need to be unique
DRY, do not repeat yourself
Shuffle the array before using it

Here is an advanced version that is worth studying

const getShuffledArr = arr => { if (arr.length === 1) { return arr}; const rand = Math.floor(Math.random() * arr.length); return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))]; }; // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
const karten = getShuffledArr(["h", "k", "a", "p"].flatMap(farbe => Array.from({length: 10})
  .map((_, i) => `${i+1}${farbe}.png`).concat(["soldat", "queen", "kingh"].map(card => `${card}${farbe}.png`)))); // shuffled array

const len = karten.length;
const handLength = 13;
const start = () => { 
  document.getElementById("alles").innerHTML = Array.from({length: 4})
    .map((_, i) => `<div class="spieler" id="spieler${i+1}"><h3>Spieler ${i+1}</h3>
    ${Array.from({length: 13})
      .map((_, i) => `<img src="${karten.pop()}" />`).join('')} // we could sort here
  </div>`).join('');
};
window.addEventListener("DOMContentLoaded",start)

<div id="alles">
 
</div>