javascript - 使用 Javascript 在提示之间创建中断

Question

所以基本上我正在努力让网页不断提示您输入数字，直到您输入 -1。然后，它将停止并发布您之前输入的所有数字的乘法表。

这就是我目前所拥有的，我真的不确定从这里到哪里去。

<script>
    var num = prompt("Enter Number", "0")

    var num = parseInt(num);
    var i = 0;

    document.write('<table ="1">');
    for (i = 1; i < 13; i++) {
        document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>");
    }

    document.write("</table>");

    var num = prompt("Enter Number", "0")

    document.write('<table ="1">');
    for (i = 1; i < 13; i++) {
        document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>");
    }

    document.write("</table>");

    var num = prompt("Enter Number", "0")

    document.write('<table ="1">');
    for (i = 1; i < 13; i++) {
        document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>");
    }

    document.write("</table>");


</script>

Answer 1

使用 do...while环形。下面的代码也使用了 Document.createElement()创建 DOM 元素，document.createTextNode()和 Node.appendchild()将它们添加到容器元素而不是使用 document.write() .

document.addEventListener('DOMContentLoaded', function() {
  var num;
  var container = document.getElementById('container');
  do {
    num = prompt("Enter Number", "0");
    if (num > 0) {
      var table = document.createElement('table');
      for (i = 1; i < 13; i++) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.appendChild(document.createTextNode(num + " x " + i + " = " + num * i));
        row.appendChild(cell);
        table.appendChild(row);
      }
      container.appendChild(table);
    }
  } while (num > 0);
});

td {
  border: 2px solid #f00;
  color: #00f;
}

<div id="container">
</div>