How to increment only one value in javascript-CodePudding

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 >
      <div >
        <h1 >HOME</h1>
        <br />
        <h1  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 >
        <h1 >GUEST</h1>
        <br />
        <h1  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

CodePudding user response：

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.

Declaring variables in JS

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 >
      <div >
        <h1 >HOME</h1>
        <br />
        <h1  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 >
        <h1 >GUEST</h1>
        <br />
        <h1  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.

CodePudding user response：

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
}

CodePudding user response：

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.slice(1))
 } else if (ev.target.tagName=="BUTTON") // reset all
  document.querySelectorAll("h1[class$=score]").forEach(h=>h.textContent="0");
}

<div >
  <div >
    <h1 >HOME</h1>
    <br />
    <h1  id="home-score">0</h1>
    <button> 1</button>
    <button> 2</button>
    <button> 3</button>
  </div>
  <div >
    <h1 >GUEST</h1>
    <br>
    <h1  id="guest-score">0</h1>
    <button> 1</button>
    <button> 2</button>
    <button> 3</button>
  </div><br>
<button>reset all scores</button>
</div>