How to add the value of two dice rolled

Question

I'm working on a dice game and I want to display the value of the two dice added together on the initial roll.

How do I get that achieved? Right now it's displaying just the two numbers together,and I'm not sure what I should set it to so it can display the added rolled value of the two dice.I have the + operator:

let rollpts = (dice1 + dice2); document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;

For example dice1 rolls a 3 and dice2 rolls a 6, I want javascript to calculate 3 + 6 and display the initial "1st Roll Points" as 9 and append that calculated value to my desired location. I can see what each dice is rolling in the console.

Codepen: https://codepen.io/williamsrashon/pen/PoGEgQB?editors=1111

<link rel ="stylesheet" href ="craps.css">
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class ="buttons">
  <button class = "btn" id="btn"> Roll Dice </button>
  <button class = "btn"> Place Bet </button>
</div>

 <div class = "points">
   <h1 id ="points"> 1st Roll Points:  </h1>
</div>

<main>
  <div class = "container">
  <div class ="dice" id="dice">
    <div class = "cube" id="results">
    
    <i id = "dice1" class="die dice1 fas fa-dice-one"></i>

    <i id ="dice2" class="die dice2 fas fa-dice-two"></i>
    
  </div>
    </div>
    </div>

Javascript

    let btn = document.getElementById("btn");
    let dice = document.querySelectorAll("dice");
    let results = document.querySelectorAll("results");
    
let diceArr1 = ['1', '2', '3', '4', '5', '6'];

let diceArr2 = ['1', '2', '3', '4', '5', '6'];
        
    
    btn.addEventListener('click', function(){
    
    let diceRandom1 = Math.floor(Math.random() * diceArr1.length);
      
    let diceRandom2 = Math.floor(Math.random() * diceArr2.length);
      
      let dice1 = diceArr1[diceRandom1];
      
      let dice2 = diceArr2[diceRandom2];
      
      console.log(dice1,dice2);
      
      
   let rollpts = (dice1 + dice2);
   document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;

   return false;
     
    })

to get `rollpts` you need to add `diceRandom1 + diceRandom2 + 2` because `diece1/2` are strings not numbers. Also there is a tripple `+` were only one should be. — wuerfelfreak, Dec 31 '20 at 05:53

Ran Marciano · Accepted Answer · 2020-12-31T06:09:02.493

2

The numbers in the array are strings, you need to parse them into numbers. You can do it by using parseInt()

change this line: let rollpts = (parseInt(dice1) + parseInt(dice2));

Or you can change the values in the array to be numbers instead of strings:

let diceArr1 = [1, 2, 3, 4, 5, 6];

let diceArr2 = [1, 2, 3, 4, 5, 6];

The difference is when you use the + operator on strings then it concatenates the two string:

console.log('strings: ' + ('6' + '3'));
console.log('numbers: ' + (6 + 3));

your full javascript code should be something like this:

    let btn = document.getElementById("btn");
    let dice = document.querySelectorAll("dice");
    let results = document.querySelectorAll("results");
    
let diceArr1 = [1, 2, 3, 4, 5, 6];

let diceArr2 = [1, 2, 3, 4, 5, 6];
        
    
    btn.addEventListener('click', function(){
    
    let diceRandom1 = Math.floor(Math.random() * diceArr1.length);
      
    let diceRandom2 = Math.floor(Math.random() * diceArr2.length);
      
      let dice1 = diceArr1[diceRandom1];
      
      let dice2 = diceArr2[diceRandom2];
      
      console.log(dice1,dice2);
      
      
   let rollpts = (dice1 + dice2);
   document.getElementById("points").innerHTML = "1st Roll Points:"+ + + rollpts;

   return false;
     
    })

edited Dec 31 '20 at 06:09

answered Dec 31 '20 at 05:53

Ran Marciano

1,431
5
13
30

Yes, I;ve changed the Arrays to integers instead of strings, but its now just placing them side by side like 3 3 instead of performing the addition operator. Which would give me 6. – Rashon Dec 31 '20 at 06:02
Yes, the codepen is updated with the integers – Rashon Dec 31 '20 at 06:08
See the code I added at the bottom of the answer – Ran Marciano Dec 31 '20 at 06:09
1

Thank You! I removed the single quotes from the arrays and that did the trick! – Rashon Dec 31 '20 at 06:15
1

Please use `parseInt` [with the second parameter `10`](https://stackoverflow.com/q/16880327/4642212). Consider using [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead. – Sebastian Simon Dec 31 '20 at 09:06

hashBender · Answer 2 · 2020-12-31T06:00:40.633

1

The reason is that you are adding two string number: three + six so the result is NaN.

Instead of taking the numbers from the array, take directly from the random number, that will solve the problem

let dice1 = diceRandom1 + 1; 
let dice2 = diceRandom2 + 1;

edited Dec 31 '20 at 06:00

answered Dec 31 '20 at 05:55

hashBender

76
8

Thanks, I've figured that part out about the NaN. – Rashon Dec 31 '20 at 06:04
To make the numbers parse to int, add '+' before a number. E.g., +3 + +3 = 6 – hashBender Dec 31 '20 at 06:09

Surjeet Bhadauriya · Answer 3 · 2020-12-31T06:13:41.720

1

Your array has string values. That's why it is returning you the wrong output. So the solution is...

Either convert array values to integer

let diceArr1 = [1, 2, 3, 4, 5, 6];

let diceArr2 = [1, 2, 3, 4, 5, 6];

OR

Use parseInt while adding the two

let rollpts = (parseInt(dice1) + parseInt(dice2));

You can find the solution here: https://codepen.io/suri66/pen/yLavpBQ?editors=1112

edited Dec 31 '20 at 06:13

answered Dec 31 '20 at 05:56

Surjeet Bhadauriya

6,755
3
34
52

Thank you've I updated that already but now its' just adding the two number like 3 3 besides 3 + 3 = 6, 6 is what I'm looking for. – Rashon Dec 31 '20 at 06:01
@Rashon How is it possible, are you seeing your console or the result? Please check my codepen https://codepen.io/suri66/pen/yLavpBQ?editors=1112 – Surjeet Bhadauriya Dec 31 '20 at 06:12
Not sure why it doesn't work on the link you've just posted, but I can see it, if I don't click the link you have. – Rashon Dec 31 '20 at 06:19

score 1 · Answer 4 · answered Dec 31 '20 at 06:01

1

You are concatenating strings instead of adding integers. One solution COULD be to typecast your integers to strings with parseInt like follows: let rollpts = (parseInt(dice1, 10) + parseInt(dice2, 10)); or to simply use integers in your array.

However, a better solution may be to generate random integers between 1 and 6 as follows: Math.floor(Math.random() * 6) + 1 and forego the arrays altogether.

answered Dec 31 '20 at 06:01

Ian

64
5

Got the integers in the array, but now it's just showing the side by side instead of adding them. 3 3 when it should display 6. – Rashon Dec 31 '20 at 06:06

How to add the value of two dice rolled

4 Answers4