document.getElementById（“demo”）。innerHTML = Math.ceil（（Math.random（）* 10）-1）;只打印1个号码？

Question

为什么document.getElementById(“demo”).innerHTML = Math.ceil((Math.random()*10)-1);只打印1个号码？

function myFunction() {
  var bbb = document.getElementById("ilgis").value;

  for (i = 0; i <= bbb; i++) {

    //document.writeln(aaa);
    document.getElementById("demo").innerHTML = Math.ceil((Math.random() * 10) - 1);

  }
}

<input type="number" id="ilgis" value="123">

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

Answer 1

因为你一直在更换innerHTML，而不是添加一些东西。

要添加内容，请使用+=而不仅仅是=：

function myFunction() {
  var bbb = document.getElementById("ilgis").value;

  for (i = 0; i <= bbb; i++) {

    //document.writeln(aaa);
    document.getElementById("demo").innerHTML += Math.ceil((Math.random() * 10) - 1);

  }
}

<input type="number" id="ilgis" value="123">

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

---

编辑：

正如@Robin Zigmond所说，构造一个字符串并在循环结束后只将该字符串附加到innerHTML以保存性能实际上会更好：

function myFunction() {
  var bbb = document.getElementById("ilgis").value;

  var numbers = "";
  for (i = 0; i <= bbb; i++) {

    //document.writeln(aaa);
    numbers += Math.ceil((Math.random() * 10) - 1);

  }
  document.getElementById("demo").innerHTML = numbers;
}

<input type="number" id="ilgis" value="123">

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>