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

Question

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 d

Answer 1

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/

Answer 2

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>

Also note your delete statement won't do anything as delete works on object properties, if you console.log( delete arr ) you will see it will print false

Answer 3

You are only printing the last row. Replace

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

with

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