I want to only increment the score in one box but it gets incremented in 2 places. my code:
var homescore = document.getElementById('home-score')
var guestscore = document.getElementById('guest-score')
var i = 0;
function add1() {
i++;
homescore.innerHTML = i
}
var i = 0
function add2() {
i += 2
homescore.innerHTML = i
}
var i = 0
function add3() {
i += 3
homescore.innerHTML = i
}
var i = 0;
function add1g() {
i++;
guestscore.innerHTML = i
}
var i = 0
function add2g() {
i += 2
guestscore.innerHTML = i
}
var i = 0
function add3g() {
i += 3
guestscore.innerHTML = i
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BasketBall Score Board</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button id="add1" onclick="add1()">+1</button>
<button id="add2" onclick="add2()">+2</button>
<button id="add3" onclick="add3()">+3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br />
<h1 class="guest-score" id="guest-score">0</h1>
<button id="add1" onclick="add1g()">+1</button>
<button id="add2" onclick="add2g()">+2</button>
<button id="add3" onclick="add3g()">+3</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
FOr example, if I clicked the +1 button in the home and incremented it to 9. And then after that, I click +1 in guest it shows 10 in the guest.
I want different values for each box. If I click +1 in HOME it should increment to 1 and then if I clicked +1 in guest it should increment to 1 not 2. And If possible tell me a shorter way to write this code. THANKS
couple of things: I would advise to avoid using var. Use let or const instead. Why?
Declaring same variable again assigns a new value to that variable, removing its reference (or relationship) to the data it referred to previously.
Primitives vs Reference data types
Below I've refactored your code. You can try it out.
script.js file:
const homescore = document.getElementById("home-score");
const guestscore = document.getElementById("guest-score");
let homescoreCount = 0;
function add(num) {
homescoreCount += num;
homescore.innerHTML = homescoreCount;
}
let guestscoreCount = 0;
function addG(num) {
guestscoreCount += num;
guestscore.innerHTML = guestscoreCount;
}
You'd change the way function is called in your HTML as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BasketBall Score Board</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button id="add1" onclick="add(1)">+1</button>
<button id="add2" onclick="add(2)">+2</button>
<button id="add3" onclick="add(3)">+3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br />
<h1 class="guest-score" id="guest-score">0</h1>
<button id="add1" onclick="addG(1)">+1</button>
<button id="add2" onclick="addG(2)">+2</button>
<button id="add3" onclick="addG(3)">+3</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I hope this helps. Don't be afraid to ask questions, and more importantly keep learning.
Instead of using
var i = 0;
function add1() {
i++;
homescore.innerHTML = i
}
Try to use,
var i = 0;
function add1() {
i += 1;
homescore.innerHTML = i
}
If anyone is interested in a quirky minimalist solution, here it is:
document.querySelector(".container").onclick=ev=>{
let d=ev.target.closest(".right-side,.left-side")?.querySelector("h1[class$=score]")
if (d) {
d.textContent=+d.textContent+(+ev.target.textContent)
} else if (ev.target.tagName=="BUTTON") // reset all
document.querySelectorAll("h1[class$=score]").forEach(h=>h.textContent="0");
}<div class="container">
<div class="left-side">
<h1 class="left-title">HOME</h1>
<br />
<h1 class="home-score" id="home-score">0</h1>
<button>-1</button>
<button>+1</button>
<button>+2</button>
<button>+3</button>
</div>
<div class="right-side">
<h1 class="right-title">GUEST</h1>
<br>
<h1 class="guest-score" id="guest-score">0</h1>
<button>-1</button>
<button>+1</button>
<button>+2</button>
<button>+3</button>
</div><br>
<button>reset all scores</button>
</div>