问题描述:

This is a coin flipping randomizer. I need to print out 10 rows and 20 columns. This is where I am stuck. My code seems to randomize correctly every time I click my button, it displays 20 columns but I cannot seem to get it to print a second row. It may be something simple that I am just not catching. Anything will be appreciated.

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>

网友答案:

The problem is you are replacing the entire results output each time you create a row with the new row. You need to append instead of replace. So change this:

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

To:

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

You also need to move the append of the result out of the inner for loop! If you leave the append within the for loop, you will see this behavior: http://jsfiddle.net/t1s93Lqz/3/

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

网友答案:

You are only printing the last row. Replace

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

with

document.getElementById("results").innerHTML += arr + "<br />";
网友答案:

You are resetting the html inside the element each iteration through the loop

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

And while you could concatenate innerHTML each iteration to fix this:

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

This will cause the whole html for that element to be re-rendered. It would be better to either build the html string first and then set the element's innerHTML property or use DOM methods like appendChild/insertAdjacentHTML.

Build string first

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;

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

Demo

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>
相关阅读:
Top