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

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

document.getElementById("results").innerHTML = arr + "
";

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

document.getElementById("results").innerHTML += arr + "
";

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 + "
";
    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+"
");
    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+"
");
  rows++
}

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