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

My javascript code is printing only one row. I need it to print 10 rows of 20 characters.

本文关键字：打印 字符 一行 代码 javascript 我的      更新时间：2023-09-26

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

Javascript Code

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++
}
}

.HTML：

<html>
<head>
<title>Coin Flip</title>
<script src="Toss.js" type="text/Javascript"></script>
<style>
#results
{
    display: block;
}
</style>
</head>
<body>
Push Button to Flip -> <input type="button" onclick="toss()" value=" Flip ">
<span id="results"></span>
</body>
</html>

问题是每次用新行创建行时都会替换整个结果输出。您需要追加而不是替换。所以改变这个：

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

自：

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

您还需要将结果的追加从内部 for 循环中移出！如果将追加保留在for循环中，您将看到以下行为：http://jsfiddle.net/t1s93Lqz/3/

JSFiddle： http://jsfiddle.net/t1s93Lqz/2/

您正在通过循环每次迭代重置元素内的 html

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

虽然你可以在每次迭代中连接内部HTML来解决这个问题：

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

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

首先构建字符串

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;

使用 insertAdjacentHTML

var element = document.getElementById("results");
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";
        }   
    }
    element.insertAdjacentHTML('beforeend',arr+"<br />");
    rows++
}

演示

var rows = 0;
var element = document.getElementById("results");
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";
    }   
  }
  element.insertAdjacentHTML('beforeend',arr+"<br />");
  rows++
}
<div id="results"></div>

另请注意，您的 delete 语句不会执行任何操作，因为删除适用于对象属性，如果您console.log( delete arr )，您将看到它将打印false

您只打印最后一行。取代 

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

跟 

document.getElementById("results").innerHTML += arr + "<br />";
相关文章：