javascript - 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;
     
    })

question from:https://stackoverflow.com/questions/65517119/how-to-add-the-value-of-two-dice-rolled

Answer 1

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));