CODEWITHSUNDEEP
javascripthtml-table
Jake
Jake

Reputation: 27

how can I display output from a JS loop on a HTML page

I am trying to get a user input to display the amount of rows they would like of "+++". I have tried a lot of things and nothing is working!!! I am currently using document.getElementById('square').innerHTML = text; , as my code to display it but nothing is happening, I am also not getting any error messages in my console. Please help!!!

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0
    var text = ''
        while (num !==rows){
            text+= '+++ \n';
            num +=1;
        }
     document.getElementById('square').innerHTML = text;
        <input class='button' id='square' type='button' onclick="loop4()" value='Draw Square' /> <br>

Upvotes: 1

Views: 1505

Answers (3)

Dacre Denny
Dacre Denny

Reputation: 30380

Perhaps you could take the following approach, by adding unique DOM elements per row. For each row, you'd populate the innerHTML field with your '+++' characters.

Consider the following:

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0;

    while (num !==rows){
        num +=1;

        // Create this row's div element
        var row = document.createElement('div');

        // Populate row with + characters
        row.innerHTML = '+++';

        // Add the row to a display area div, which is a new div intended
        // for displaying the desired result
        document.getElementById('square').append( row );
    }

} // Also, be sure to add this to avoid syntax errors
<!-- Remove id=square from button -->
<input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br>

<!-- Add this div to display square -->
<div id="square"></div>

Upvotes: 0

yaakov
yaakov

Reputation: 4675

I fixed it up, and added a bit too :)

You were missing a parentheses at the end of the function. Additionally, the input element won't take .innerHTML. You can set .value if you want it to be on the button, but buttons can't take .innerHTML.

function loop4() {
  var rows = +prompt('Please enter the ammount of rows you would like')
  var num = 0
  var text = ''
  while (num !== rows) {
    text += '+'.repeat(rows) +' <br>';
    num += 1;
  }
  document.getElementById('square').innerHTML = text;
}
<input class='button' id='square-btn' type='button' onclick="loop4()" value='Draw Square' /> <br>
<pre id="square">

</pre>

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21658

Try putting the text inside of an element like pre

function loop4(){
    var rows = +prompt ('Please enter the ammount of rows you would like')
    var num = 0
    var text = ''
        while (num !==rows){
            text+= '+++ \n';
            num +=1;
        }
     document.getElementById('square').innerText = text;
}
<input class='button' type='button' onclick="loop4()" value='Draw Square' /> <br>

<pre id="square"></pre>

Upvotes: 0

Related Questions