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

Question

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>

I'm getting some error messages in the console

yaakov
– yaakov

2018-10-04 00:24:31 +00:00
Commented Oct 4, 2018 at 0:24 — yaakov
– yaakov, Commented Oct 4, 2018 at 0:24

yaakov · Accepted Answer · 2018-10-04 00:28:43Z

1

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>

answered Oct 4, 2018 at 0:28

yaakov

4,7274 gold badges29 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Brand · Accepted Answer · 2018-10-04 00:27:55Z

0

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>

answered Oct 4, 2018 at 0:27

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Comments

Dacre Denny · Accepted Answer · 2018-10-04 00:29:51Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related