我的javascript代码只打印一行。我需要它打印10行20个字符。

这是一个投币随机发生器。我需要打印出10行20列。这就是我被困的地方。每次我点击我的按钮时，我的代码似乎都能正确地随机化，它显示20列，但我似乎无法让它打印第二行。这可能是一些简单的事情，我只是不明白。任何事情都会很感激的

Javascript代码

function toss()
{
var heads = "x ";
var tails = "o ";
var rows = 0;
while(rows < 10)
{   
    var arr = new Array(20);
    for(var i = 0; i < arr.length; i++)
    {       
        var val = Math.floor( Math.random() * 2 );
        if(val === 1)
        {
            arr[i] = " x";
        }
        else
        {
            arr[i] = " y";
        }   
        document.getElementById("results").innerHTML = arr + "<br />";
    }
    delete arr;
    rows++
}
}

函数toss（）
{
var heads=“x”；
var tails=“o”；
var行=0；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（变量i=0；i”；
}
删除arr；
排++
}
}

HTML:

扔硬币
#结果
{
显示：块；
}
按按钮翻转->

您只打印最后一行。替换

document.getElementById("results").innerHTML = arr + "<br />";

document.getElementById（“结果”）.innerHTML=arr+“
”；

与

document.getElementById（“结果”）.innerHTML+=arr+“
”；

您只打印最后一行。替换

document.getElementById("results").innerHTML = arr + "<br />";

document.getElementById（“结果”）.innerHTML=arr+“
”；

与

document.getElementById（“结果”）.innerHTML+=arr+“
”；

问题在于，每次创建一行时，都要用新行替换整个结果输出。您需要追加而不是替换。因此，改变这一点：

document.getElementById（“结果”）.innerHTML=arr+“
”

致：

document.getElementById（“结果”）.innerHTML+=arr+“
”

您还需要将结果的附加移出内部for循环！如果将追加留在
for
循环中，您将看到以下行为：

jsiddle:
问题是，每次创建一行时，都要用新行替换整个结果输出。您需要追加而不是替换。因此，改变这一点：

document.getElementById（“结果”）.innerHTML=arr+“
”

致：

document.getElementById（“结果”）.innerHTML+=arr+“
”

您还需要将结果的附加移出内部for循环！如果将追加留在
for
循环中，您将看到以下行为：

jsFIDLE:
在循环的每个迭代中，您都在重置元素内部的html

document.getElementById("results").innerHTML = arr + "<br />";

document.getElementById（“结果”）.innerHTML=arr+“
”；

虽然您可以在每次迭代中连接innerHTML来解决此问题：

document.getElementById("results").innerHTML += arr + "<br />";

document.getElementById（“结果”）.innerHTML+=arr+“
”；

这将导致重新呈现该元素的整个html。最好先构建html字符串，然后设置元素的innerHTML属性，或者使用诸如appendChild/insertAdjacentHTML之类的DOM方法

首先构建字符串

var html = "";
while(rows < 10)
{   
    var arr = new Array(20);
    for(var i = 0; i < arr.length; i++) {       
        var val = Math.floor( Math.random() * 2 );
        if(val === 1) {
            arr[i] = " x";
        } else {
            arr[i] = " y";
        }   
    }
    //moved the concatenation out of the loop
    //otherwise you will get a line each as the array is set
    html += arr + "<br />";
    rows++
}
document.getElementById("results").innerHTML = html;

var html=”“；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（var i=0；i”；
排++
}
document.getElementById（“结果”）.innerHTML=html；

使用

var-element=document.getElementById（“结果”）；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（var i=0；i”）；
排++
}

演示


var行=0；
var元素=document.getElementById（“结果”）；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（var i=0；i”）；
排++
}
在循环的每次迭代中，您都在重置元素内部的html

document.getElementById("results").innerHTML = arr + "<br />";

document.getElementById（“结果”）.innerHTML=arr+“
”；

虽然您可以在每次迭代中连接innerHTML来解决此问题：

document.getElementById("results").innerHTML += arr + "<br />";

document.getElementById（“结果”）.innerHTML+=arr+“
”；

这将导致重新呈现该元素的整个html。最好先构建html字符串，然后设置元素的innerHTML属性，或者使用诸如appendChild/insertAdjacentHTML之类的DOM方法

首先构建字符串

var html = "";
while(rows < 10)
{   
    var arr = new Array(20);
    for(var i = 0; i < arr.length; i++) {       
        var val = Math.floor( Math.random() * 2 );
        if(val === 1) {
            arr[i] = " x";
        } else {
            arr[i] = " y";
        }   
    }
    //moved the concatenation out of the loop
    //otherwise you will get a line each as the array is set
    html += arr + "<br />";
    rows++
}
document.getElementById("results").innerHTML = html;

var html=”“；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（var i=0；i”；
排++
}
document.getElementById（“结果”）.innerHTML=html；

使用

var-element=document.getElementById（“结果”）；
while（行数<10）
{   
var-arr=新阵列（20）；
对于（var i=0；i”）；
排++
}

演示


var行=0；
var element=document.getElementBy