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"
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>