Add line break to HTML from Js loop

Question

I have a simple Js function that generates a list of random numbers based on how many the user wants. The function works fine, and logs fine, but it isn't displaying like I'd like it to. I'm new to Javascript, so I tried using the \n escape character, but it didn't do anything. Any help would be appreciated.

function generateIDs() 
{

var num = document.getElementById('numberToGenerate').value;
var par = document.getElementById('numbers');
var button = document.getElementById('genButton');
button.disabled = true;

for (var x=0;x<num;x++) 
{

var id = Math.floor((Math.random()*10000)+1);
par.innerHTML = id;


}


    <form>
Auto-Generate <input type="text" name="number" id="numberToGenerate"/> IDs.
<button type="button" onclick="generateIDs()" id="genButton">Go!</button>
</form>

<p id="numbers">

</p>

Mark Avenius · Accepted Answer · 2013-06-09 17:26:43Z

2

\n doesn't mean much to a browser; use <br/> instead.

Example:

// snip
for (var x=0;x<num;x++) 
{
    var id = Math.floor((Math.random()*10000)+1);
    par.innerHTML = id.toString() + '<br/>';       
}
//snip

Note that this is going to overwrite the previous value on each iteration. You probably want this:

par.innerHTML += id.toString() + '<br/>';

edited Jun 9, 2013 at 17:26

answered Jun 9, 2013 at 17:19

Mark Avenius

14k6 gold badges45 silver badges52 bronze badges

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

1 Comment

Sachihiro Over a year ago

how would you reset this, to prevent printing again without clearing the field.

Collectives™ on Stack Overflow

Add line break to HTML from Js loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related