Adding two variables in javascript surrounded by HTML

Question

I have stored two variables that generate simulate two random die rolls. I'm trying to add them in another paragraph like in the following; however, the line that adds them generates a "NaN". Any suggestions?

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Rolling Two Dice</title>
  </head>
  <body>
    <p>Your first die rolled a <script>var roll1 = document.write(1 +
    Math.floor(6 * Math.random()))</script>.</p>
    <p>Your second die rolled a <script>var roll2 = document.write(1 +
    Math.floor(6 * Math.random()))</script>.</p>
    <p>The total of your rolls is <script>document.write(roll1 +roll2)</script>.</p>
</body>
</html>

jbabey · Accepted Answer · 2012-09-11 17:23:50Z

Store the numbers, not the return from document.write (I have no idea what it returns). Also, i've seperated your HTML from your javascript, as using document.write is not a good habit to be in and mixing functional code (javascript) with presentational code (HTML) is a bad practice.

HTML:

<body>
    <p>Your first die rolled a <span id="roll1"></span>.</p>
    <p>Your second die rolled a <span id="roll2"></span>.</p>
    <p>The total of your rolls is <span id="total"></span>.</p>
</body>

JS:

var roll1 = 1 + Math.floor(6 * Math.random());
var roll2 = 1 + Math.floor(6 * Math.random());
var total = roll1 + roll2;
document.getElementById('roll1').textContent = roll1;
document.getElementById('roll2').textContent = roll2;
document.getElementById('total').textContent = total;

*Note that the textContent property will not work with some browsers.

BNL · Accepted Answer · 2012-09-11 17:29:12Z

0

You need to assign the values to the variables then write the variables to the document.

<script>var roll1 = 1 + Math.floor(6 * Math.random());  document.write(roll1)</script>

I'd also suggest moving all of the script to a single block, as shown by jbabey. so you dont have little lines of JS all over your html. Use javascript in the single block to update the contents of a span with the values.

edited Sep 11, 2012 at 17:29

answered Sep 11, 2012 at 17:21

BNL

7,1214 gold badges30 silver badges32 bronze badges

Comments

Makita · Accepted Answer · 2012-09-11 17:27:03Z

0

As per your sample:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Rolling Two Dice</title>
    <script>
        var roll1 = 1 + Math.floor(6 * Math.random());
        var roll2 = 1 + Math.floor(6 * Math.random());
        var total = roll1 + roll2
    </script>
</head>
<body>
<p>Your first die rolled a <script>document.write(roll1)</script>.</p>
<p>Your second die rolled a <script>document.write(roll2)</script>.</p>
<p>The total of your rolls is <script>document.write( total )</script>.</p>
</body>
</html>

The issue was mainly:

<script>var roll1 = document.write(1 + Math.floor(6 * Math.random()))</script>

document.write does not return a value you can assign to a variable.

answered Sep 11, 2012 at 17:27

Makita

1,81212 silver badges16 bronze badges

Collectives™ on Stack Overflow

Adding two variables in javascript surrounded by HTML

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