How to add and keep track of score in Dice Game

April 25, 2023

So i’m trying to make a dice game. But i can’t quite figure out how to keep track of total score (sum of dice numbers), so it adds up everytime i throw de dices.

HTML:

<body>
    <header>
        <p class="score">Poäng: 0</p>
    </header>

    <main>
        <H1>Välj ditt "knockout" nummer:</H1>       
         <select name="" id="ko">
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
<div class="dce">
        <p class="dice1">Tärning 1: - </p>
        <p class="dice2">Tärning 2: - </p>
        <p class="sumkast">Summa kast: 0 </p>
</div>
        <a href="#" class="btn">KASTA</a>
    </main>

    <footer>
        <section class="restart">
            <button onClick="window.location.reload();">BÖRJA OM</button>
        </section>
    </footer>

    <script src="js/spel.js"></script>
</body>
</html>

javascript:

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

document.querySelector('a.btn')
.addEventListener('click', () => {

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

What i tried

score = 0;
score += score+rollpts;
document.querySelector('p.score').innerText = "Poäng: "+ + + 
score;

document.querySelector('p.dice1').innerText = "Tärning 1: "+ + + dice1;
document.querySelector('p.dice2').innerText = "Tärning 2: "+ + + dice2;
document.querySelector('p.sumkast').innerText = "Summa kast: "+ + + rollpts;

var e = document.getElementById("ko");
function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value, text);
}
e.onchange = onChange;
onChange();

if (rollpts == e.value) {
    alert("Game over! Tryck på RESTART om du vill köra igen!");
}

});

I want to top "poäng:" to be updated with every throw, so that "summa kast: " gets added to the total score. "summa kast" + "Summa kast" = "Poäng"

>Solution :

Your score needs to be at the outside of your click event listener, example:

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

let score = 0;
document.querySelector('a.btn').addEventListener('click', () => {
  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;

  score += rollpts;
  document.querySelector('p.score').innerText = 'Poäng: ' + +(+score);

  document.querySelector('p.dice1').innerText = 'Tärning 1: ' + +(+dice1);
  document.querySelector('p.dice2').innerText = 'Tärning 2: ' + +(+dice2);
  document.querySelector('p.sumkast').innerText = 'Summa kast: ' + +(+rollpts);

  var e = document.getElementById('ko');
  function onChange() {
    var value = e.value;
    var text = e.options[e.selectedIndex].text;
    console.log(value, text);
  }
  e.onchange = onChange;
  onChange();

  if (rollpts == e.value) {
    alert('Game over! Tryck på RESTART om du vill köra igen!');
  }
});

<!DOCTYPE html>
<html>
  <body>
    <header>
      <p class="score">Poäng: 0</p>
    </header>

    <main>
      <h1>Välj ditt "knockout" nummer:</h1>
      <select name="" id="ko">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      <div class="dce">
        <p class="dice1">Tärning 1: -</p>
        <p class="dice2">Tärning 2: -</p>
        <p class="sumkast">Summa kast: 0</p>
      </div>
      <a href="#" class="btn">KASTA</a>
    </main>

    <footer>
      <section class="restart">
        <button onClick="window.location.reload();">BÖRJA OM</button>
      </section>
    </footer>
  </body>
</html>