Question

我必须制作一个游戏，其中有一个8x8的桌子和一个硬币显示在他们身上（一次超过10个位置）同时在不同的位置上3000毫秒。硬币显示应该点击＆＃34;开始＆＃34;按钮，它持续1分钟。我的问题是我无法制作一个随机函数，它在不同的位置上随机生成图像。它给出了一些错误的appendchild undefined。我希望我的图像在不同的位置上随机显示），这就是我尝试过的到目前为止。我刚刚开始学习JS，所以请不要判断我的代码

PS：我不能使用任何Jquery

＆＃13;

var tbl = document.createElement('table');
var tr = tbl.insertRow();
var td = tr.insertCell();
var div = document.createElement('div');
div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image">';
var img = document.getElementById("coin_image");


function tableCreate() {
  var body = document.body;
  var tbl = document.createElement('table');
  tbl.style.width = '730px';
  tbl.style.height = '650px';
  tbl.style.border = '4px solid grey';
  tbl.style.display = 'inline-block';

  for (var i = 0; i < 8; i++) {
    var tr = tbl.insertRow();
    for (var j = 0; j < 8; j++) {
      var td = tr.insertCell();
      var div = document.createElement('div');
      td.appendChild(div);
      div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image">';
      td.style.border = '1px solid black';
      td.style.width = '85px';
      td.style.height = '75px';
    }
  }
  body.appendChild(tbl);

}

function onTimer() {
  var seconds = 60;

  function tick() {
    var counter = document.getElementById("counter");
    seconds--;
    counter.innerHTML = "<h1>Time Left:-" + "0:" + (seconds < 10 ? "0" : "") + String(seconds) + "</h1>";
    if (seconds > 0) {
      setTimeout(tick, 1000);
    } else {
      alert("Game over");
    }
  }
  tick();
  setInterval(function() {
    var randomNumber = Math.floor(Math.random() * 64);
    td[randomNumber].appendChild(img);
  }, 3000);
}

function onRestart() {
  location.reload();
}

＆＃13;

.button_class {
  float: left;
  display: inline-block;
  width: 400px;
}

.btn {
  width: 140px;
  height: 50px;
  margin: 20px;
  font-size: 16px;
  background-color:
}

.coin_img {
  width: 100%;
  height: 70px;
  display: none;
}

.counter_div {
  margin-left: 20px;
}

＆＃13;

<body onload="tableCreate()">
  <div class="button_class">
    <button type="button" name="start_button" class="start_button btn" id="st_button" onclick="onTimer()">Start</button>
    <button type="button" name="restart_button" class="restart_button btn" id="rs_button" onclick="onRestart()">Restart</button>
    <div class="counter_div" id="counter">
      <h1>Total Time:-1:00</h1>
    </div>
  </div>
</body>

＆＃13;

Answer 1

不要在全球范围内声明td;
您可以使用getElementsByTagName method访问随机单元格，例如 var td = tbl.getElementsByTagName("td")[randomNumber]。

Answer 2

这里有几个问题：

您的代码在Cannot read property 'appendChild' of undefined函数的后续行中提供了onTimer()：
```
 td[randomNumber].appendChild(img);
```
很明显， td 这里是undefined。

你已经两次声明'td'。

首次在全球范围内绑定td的顶部，

和第二次嵌套for loop
```
...
for(var i = 0; i < 8; i++){
 var tr = tbl.insertRow();
 for(var j = 0; j < 8; j++){
    var td = tr.insertCell(); //<-- HERE
    var div = document.createElement('div');
    td.appendChild(div);
    div.innerHTML = '<img src="coin.png" alt="coin.png" class="coin_img" id="coin_image">';
    td.style.border = '1px solid black';
    td.style.width = '85px';
    td.style.height = '75px';
  }
}
...
```
第二个声明仅限于tableCreate()函数创建的“功能范围”。因此，当您尝试将图像附加到随机生成的位置的td时，您实际上获得了“td”的全局引用（这只是一个空元素而不是元素数组）。即使你在嵌套for循环中继续更新全局td上的东西，你最终会得到for循环中td的最后一个引用值
您的随机数生成存在一些问题。您正在生成0到63之间的随机数，并希望这会将图像放入您在tableCreate()函数中生成的64个td之一，对吗？错误！原因如下：你没有立刻生成那些64 td！相反，你为8 tr的每一个生成了8个td。所以你真正需要的是：
- 从0-7生成随机数以选择随机行（tr）
- 从0-7生成另一个随机数，以选择从步骤1获得的行中的随机列（td）。

这是plnkr demo

使用JS一次在td上显示多个图像

2 个答案: