Question

我正在尝试建立一个百家乐游戏，并希望将每张卡片的图像放在嵌套在div - 列表项中的li中。我在div中有一个带有id标记的空图片代码，并在Javascript中创建了一个卡片对象，其中包含＆＃34; name＆＃34;，＆＃34; suit＆＃34;和＆＃34;价值＆＃34;。＆＃34;名称＆＃34;和＆＃34;西装＆＃34;与位于当地＆＃34;图像中的每张卡片（即AceSpades，TenDiamonds，JackClubs等等）的文件名相关。文件夹为＆＃34; .png＆＃34;。当我运行代码时，我得到一个＆＃34;无法读取属性＆appendChild of null＆＃34;。

以下是我到目前为止的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

id代码需要img，Javascript（jQuery）可以更改src

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

然后在jQuery中

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

Answer 2

编辑：代码已更新。

您正在尝试在页面加载之前运行函数var b1n = b1.name + b1.suit;。使用事件处理程序或将b1添加到body标记将在页面加载后运行代码。另外，不要在脚本文件或脚本标记中运行该函数。

编辑前：

在不初始化initialDealOut的情况下运行b1n可能是问题的根源。

运行函数{{1}}进行初始化，然后在分配{{1}}之前将其初始化。

使用Javascript

2 个答案: