Using .innerHTML and creating a new line?

Using .innerHTML and creating a new line?
0

#1

I am working on just a small little program that rolls two ten sided dice a set amount of times based upon user input. The program itself seems to run flawlessly, but I am having issues getting a new line break using .innerHTML within a for loop. Is there some way to do this I am missing? I have tried adding in
element and “\n” for js, but neither is working.

Example of the code I am using:

<!DOCTYPE html>
<html>
<head>
<title>2 10sided dice</title>
</head>
<body>
<p> TEST </p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
var dieRoll1=0; var dieRoll2=0;
var countFifteen = 0; var countPairs = 0; var str = "";

var num = Number(prompt("How many times would you like to roll the dice? "));

for (var i = 1; i <= num; i++)
{
  dieRoll1 = (Math.floor(Math.random()*10)+1);
  dieRoll2 = (Math.floor(Math.random()*10)+1);
  console.log(dieRoll1);
  console.log(dieRoll2);

  if (i < 11)
  {
    var phrase ="Die roll 1 was " + dieRoll1 + " and die roll 2 was " + dieRoll2 + ".";
    str += phrase;
    document.getElementById("demo1").innerHTML = str + "<br>"; 
    /* this is where my issue is - it won't create */
  }

  if (dieRoll1+dieRoll2 == 15)
  {
    countFifteen += 1;
  }

  if (dieRoll1 == dieRoll2)
  {
    countPairs += 1;
  } 
}

document.getElementById("demo2").innerHTML = "A total of " + num + " rolls were rolled. " + countFifteen + " times the dice totalled fifteen. The rolls paired a total of " + countPairs + " times.";

</script>

</body>
</html>

*** The program is based off an assignment in my CSC class in C, but I wanted to see if I could take it over to work in a different programming environment as a small challenge. But the new line problem is completely baffling me.


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Because you are outputting to HTML, you need to think HTML. In HTML, a new line is done with the tag <br/>.

So, your output line should be:

    var phrase ="Die roll 1 was " + dieRoll1 + " and die roll 2 was " + dieRoll2 + ".<br/>";

#4

Yeah, I found it shortly after I posted the question, but with being new to the forum, I couldn’t figure out how to delete the post fast enough while at work. Thank you for answering quickly though.

I was hoping that I could have just added it to the string afterwards, but no methods were working. Turns out it was the wrong place to do it anyways.


#5
  {
    var phrase ="Die roll 1 was " + dieRoll1 + " and die roll 2 was " + dieRoll2 + ".";
    document.getElementById("demo1").innerHTML += phrase + " <br>"; 
  }

This works too ¯\(ツ)

Apparently you’re NOT supposed to += with innerHTML but I’m curious why it makes the br work when done like this


#6

It’s probably best not to delete questions - others may have the same question. But if you stumble on the answer before anyone else does, you’re welcome to answer your own question. You wouldn’t be the first.


#7

Yeah, this was my end result that I ended up coming up with:

<!DOCTYPE html>
<html>
<head>
<title>2 10sided dice</title>
</head>
<body>
<p> TEST </p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
var dieRoll1=0; var dieRoll2=0;
var countFifteen = 0; var countPairs = 0; var str = "";

var num = Number(prompt("How many times would you like to roll the dice? "));


for (var i = 1; i <= num; i++)
{
  dieRoll1 = (Math.floor(Math.random()*10)+1);
  dieRoll2 = (Math.floor(Math.random()*10)+1);
  console.log(dieRoll1);
  console.log(dieRoll2);

  if (i < 11)
  {
    var phrase ="Die roll 1 was " + dieRoll1 + " and die roll 2 was " + dieRoll2 + ".<br>";
    str += phrase;
    document.getElementById("demo1").innerHTML = str;
  }

  if (dieRoll1+dieRoll2 == 15)
  {
    countFifteen += 1;
  }

  if (dieRoll1 == dieRoll2)
  {
    countPairs += 1;
  } 
}

document.getElementById("demo2").innerHTML = "A total of " + num + " rolls were rolled. " + countFifteen + " times the dice totalled fifteen. The rolls paired a total of " + countPairs + " times.";


</script>

</body>
</html>

Was having trouble finding a way to get the new line into the concatenated string. Turns out that wasn’t the place to add the new line anyways.

Thanks again for the replies.


#8

Ah, so the old instances of the <br> were just being replaced every time innerHTML was set…