How can i get these Javascript functions to increment correctly without combining with my original v-CodePudding

I'm currently doing a Javascript challenge on Scrimba that requires you to recreate a Basketball scoreboard. I've gotten the design down but i'm having trouble with increment buttons to add either 1,2, or 3 points to either teams score. Each team's scoreboard has 3 buttons underneath that can add 1,2, or 3 points. Originally i was just going to write 6 functions, 3 for each team that would function based on which increment button you select for which team. I figured i could probably just write the three separate increment functions and find a way to pass in an argument to direct which team was getting the points. This worked except that the functions all target a 'points' variable so they end up incrementing off of each other when you add points to the opposite team.

Here is the HTML

<div >
            <div >
                <h3 >HOME</h3>
                <h2  id="home-score">0</h2>
                <div>
                    <button  onclick="add1Point('home-score')"> 1</button>
                    <button  onclick="add2Points('home-score')"> 2</button>
                    <button  onclick="add3Points('home-score')"> 3</button>
                </div>
            </div>
            <div >
                <h3 >GUEST</h3>
                <h2  id="guest-score">0</h2>
                <div>
                    <button  onclick="add1Point('guest-score')"> 1</button>
                    <button  onclick="add2Points('guest-score')"> 2</button>
                    <button  onclick="add3Points('guest-score')"> 3</button>
                </div>

And here is the JS

let points = 0

function add1Point(idValue){
    let teamId = document.getElementById(idValue)
    points  = 1
    teamId.textContent = points
}
function add2Points(idValue){
    let teamId = document.getElementById(idValue)
    points  = 2
    teamId.textContent = points
}
function add3Points(idValue){
    let teamId = document.getElementById(idValue)
    points  = 3
    teamId.textContent = points
}

I know i need to find a way to have two separate point variables for each team but I'm not sure how i can point the individual functions to a specific variable base on which teams button is selected. Not without creating a whole new function specifically for that variable. If possible i would like a solution with the most basic vanilla JS possible, I know there are more complex ways to solve this but im only so far with my learning. Thanks in advance!

CodePudding user response：

You can simplify it to one function only:

var homeScore = 0;
var guestScore = 0;
var homeScoreEl = document.getElementById('home-score');
var guestScoreEl = document.getElementById('guest-score');

function addPoints(isHome, points = 1) {
  window[isHome ? 'homeScore' : 'guestScore']  = points
  window[isHome ? 'homeScoreEl' : 'guestScoreEl'].textContent = window[isHome ? 'homeScore' : 'guestScore']
}

.container {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  font-family: Courier, Courier New, monospace;
  padding: 2px 5px;
}

.container .column .score {
  border: 1px solid white;
  border-radius: 2px;
  padding: 2px 5px;
  text-align: center;
}

<div >
            <div >
                <h3 >HOME</h3>
                <h2  id="home-score">0</h2>
                <div>
                    <button  onclick="addPoints(true)"> 1</button>
                    <button  onclick="addPoints(true, 2)"> 2</button>
                    <button  onclick="addPoints(true, 3)"> 3</button>
                </div>
            </div>
            <div >
                <h3 >GUEST</h3>
                <h2  id="guest-score">0</h2>
                <div>
                    <button  onclick="addPoints(false)"> 1</button>
                    <button  onclick="addPoints(false, 2)"> 2</button>
                    <button  onclick="addPoints(false, 3)"> 3</button>
                </div>

CodePudding user response：

As far as I understand, you'd probably need 2 individual variables to hold the value for each team, here's an example for add 1 point

let guest = 0;
let home = 0;

function add1Point(idValue){
    let teamId = document.getElementById(idValue)
    if (idValue === 'guest-score') { //Assume your element has name to tell them apart
         guest  = 1;
         teamId.textContent = guest;
    } else {
         home  = 1;
         teamId.textContent = home;
    }
}

In the other hand, you should make your method reusable and flexible a little like this

function addPoints(idValue, point)  {
    let teamId = document.getElementById(idValue)
    if (idValue === 'guest-score') { //Assume your element has name to tell them apart
        guest  = point;
        teamId.textContent = guest;
    } else {
        home  = point;
        teamId.textContent = home;
    }
}

then your code will look cleaner

<button  onclick="addPoints('guest-score', 1)"> 1</button>
<button  onclick="addPoints('guest-score', 2)"> 2</button>
<button  onclick="addPoints('guest-score', 3)"> 3</button>

CodePudding user response：

use closures

    function score(points = 0) {
      return function(value) {
        points  = value;
        return points;
      }
    }

    const $homeScore = document.getElementById("home-score");

    const $guestScore = document.getElementById("guest-score");

    const homeScore = score();

    const guestScore = score();

    const $homeButtons = document.querySelectorAll("#home-buttons button");

    const $guestButtons = document.querySelectorAll("#guest-buttons button");

    for(let i = 0; i < $homeButtons.length; i  ) {
      $homeButtons[i].addEventListener("click", () => {
        $homeScore.innerText = homeScore(i   1);
      });
    }

    for(let i = 0; i < $guestButtons.length; i  ) {
      $guestButtons[i].addEventListener("click", () => {
        $guestScore.innerText = guestScore(i   1);
      });
    }

.container {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  font-family: Courier, Courier New, monospace;
  padding: 2px 5px;
}

.container .column .score {
  border: 1px solid white;
  border-radius: 2px;
  padding: 2px 5px;
  text-align: center;
}

<div >
  <div >
    <h3 >HOME</h3>
    <h2  id="home-score">0</h2>
    <div id="home-buttons">
        <button > 1</button>
        <button > 2</button>
        <button > 3</button>
    </div>
  </div>
  <div >
    <h3 >GUEST</h3>
    <h2  id="guest-score">0</h2>
    <div id="guest-buttons">
        <button > 1</button>
        <button > 2</button>
        <button > 3</button>
    </div>
  </div>
 </div>