JS中通过文件夹路径存储52张卡牌及页面不显示问题排查

你的代码存在三个核心问题： #

1. 错误的DOM属性操作：document.getElementById("Spieler1")获取的是<div>元素，而src是<img>标签专属属性，div没有这个属性，赋值不会生效。
2. 数组直接赋值给属性：即使是img标签，src也只能接收单个图片路径字符串，你直接把整个卡牌数组赋值过去，完全不符合属性要求。
3. 缺少图片路径拼接：数组里只有卡牌文件名，没有加上存储卡牌的文件夹路径，浏览器找不到图片资源。

修正后的实现方案 #

假设你的卡牌图片都存在./card-images/文件夹下（可根据实际路径修改），我们可以通过遍历数组创建<img>元素的方式，把卡牌显示在页面上：

1. 修改JavaScript代码

function Start() {
  // 定义卡牌文件夹路径
  const cardFolder = './card-images/';
  // 修正数组笔误："k.png"改为"8k.png"，凑齐52张卡
  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", "8k.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"];

  // 获取要显示卡牌的容器
  const player1Container = document.getElementById("Spieler1");
  // 清空容器原有内容
  player1Container.innerHTML = '';

  // 遍历卡牌数组，创建img元素并添加到容器
  Karten.forEach(cardName => {
    const img = document.createElement('img');
    // 拼接完整图片路径
    img.src = cardFolder + cardName;
    // 添加样式类，方便CSS控制大小和间距
    img.classList.add('card');
    // 将图片加入容器
    player1Container.appendChild(img);
  });

  console.log(Karten);
}

2. 补充CSS样式（控制卡牌显示效果）

.card {
  width: 80px;
  height: 120px;
  margin: 5px;
  border-radius: 4px;
  border: 1px solid #333;
  object-fit: cover;
}

#Spieler1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 140px;
}

3. HTML保持原有结构即可

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

额外提示 #

• 如果需要给多个玩家分配卡牌，可以扩展逻辑，比如随机抽取数组元素分配到不同玩家容器中。
• 确保卡牌文件夹路径与实际存储位置一致，否则图片会加载失败。

内容的提问来源于stack exchange，提问作者Amir004