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.
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.
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/>";
1 Like
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.
{
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
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.
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.
Ah, so the old instances of the <br>
were just being replaced every time innerHTML was set…