使用 Javascript 在 div 中放置图像

Question

我正在尝试构建一个百家乐游戏，并希望将每张牌的图像放置在嵌套在 li - 列表项中的 div 中。我在div 中有一个带有id 标记的空图像标记，并在Javascript 中创建了一个具有“名称”、“套装”和“值”的卡片对象。 “名称”和“花色”与位于本地“图像”文件夹中的每张牌的文件名（即 AceSpades、TenDiamonds、JackClubs 等）相关，为“.png”。当我运行代码时，我收到“无法读取属性 'appendChild of null”。

以下是我迄今为止所拥有的 javascript 代码的摘录，以说明我来自哪里：

function card(name, suit, value) {
  this.name = name;
  this.suit = suit;
  this.value = value;
}

var cardsInDeck = [];
var suits = ["Spades","Hearts","Clubs","Diamonds"];
var names = ["Ace","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten","Jack","Queen","King"];
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 0, 0, 0];
var card;

for (var i = 0; i < suits.length; i++) {
    for (var j = 0; j < names.length; j++) {
        cardsInDeck.push(new card(names[j], suits[i], values[j]));
    }
}

var b1, b2, b3, p1, p2, p3;

var drawOne = function() {
   var card = cardsInDeck.pop();
   return card;
}

var initialDealOut = function() {
  b1 = drawOne();
  p1 = drawOne();

  b2 = drawOne();
  p2 = drawOne();
}

initialDealOut();

var b1n = b1.name + b1.suit;

我试图用来将图像放在div 中的代码是：

var b1Image = function() {
  var div = document.getElementById('b1');
  var image = document.createElement('img');
    image.src = "image/" + b1n + ".png";
  div.appendChild(image);
}

b1Image();

我要放置图像的核心 HTML 是：

<div class="row">
  <ul class="cards">
    <li class="box">
      <div class="card" id="b1">
        <img src="">
      </div>
    </li>
  </ul>
</div>

我已经搜索了许多与类似问题相关的回复，但在给出的答案中，没有一个似乎与我尝试实施它们的方式一样有效。我是编程新手，所以我确信这是一个简单的解决方法，但我很可能没有正确处理它。

对于这个问题给它带来的任何困惑，我提前道歉，并感谢任何人可以提供帮助以帮助解决这个问题。

Answer 1

编辑：代码已更新。

您正在尝试在页面加载之前运行函数b1Image()。 使用事件处理程序或将onload="b1Image()" 添加到正文标记将在页面加载后运行代码。 另外，不要在脚本文件或脚本标签中运行该函数。

编辑前：

运行 var b1n = b1.name + b1.suit; 而不初始化 b1 可能是问题的根源。

如果您还没有分配b1n，请运行函数initialDealOut对其进行初始化。

Answer 2

img 标签需要 id，而 Javascript (jQuery) 可以更改 src

<img id='my_image' src="">

然后在 jQuery 中

$("#my_image").attr("src","image.jpg");