使用 Javascript 在 div 中放置图像

Question

我正在尝试构建百家乐游戏，并希望将每张牌的图像放置在嵌套在 li - 列表项中的 div 中。我在 div 中有一个带有 id 标签的空图像标签，并在 Javascript 中创建了一个具有 "name"、"suit" 和 "value"。 "name" 和 "suit" 与位于本地 "images" 文件夹中的每张卡片（即 AceSpades、TenDiamonds、JackClubs...等）的文件名相关，格式为“.png” .当我运行代码时，我得到 "Cannot read property '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>

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

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

Answer 1

您需要 id 作为 img 标签并且 Javascript (jQuery) 可以更改 src

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

然后在jQuery

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

Answer 2

编辑：代码已更新。

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

编辑前：

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

运行函数 initialDealOut 在分配它之前初始化它 b1n 如果你没有。

使用 Javascript 在 div 中放置图像

Place an image in div using Javascript

html

javascript

image

getelementbyid

appendchild