javascripthtmlsumadditiondice

How to add and keep track of score in Dice Game


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>