How to add and remove value onclick event in JavaScript

João Victor Oliveira 0
Viewed 25

I've two tables one with objects and their values, other with options to the user click that change the another table values.

Image of the tables

If the user click one time, the values change correctly, however, if the user click again, the values won't change correctly.

For example:

let teams = [
        {name: 'Roma', points: 0, wins: 0, draws: 0, loses: 0},
        {name: 'Atalanta', points: 0, wins: 0, draws: 0, loses: 0},
        {name: 'Milan', points: 0, wins: 0, draws: 0, loses: 0},
        {name: 'Fiorentina', points: 0, wins: 0, draws: 0, loses: 0},
    ]
let matches = [
        // Round 1.
        {homeName: teams[0].name, teamHome: 0, win: '', draw: '', awayTeamWin: '', teamAway: 1, awayName: teams[1].name},
        {homeName: teams[2].name, teamHome: 2, win: '', draw: '', awayTeamWin: '', teamAway: 3, awayName: teams[3].name},
        // Round 2.
        {homeName: teams[0].name, teamHome: 0, win: '', draw: '', awayTeamWin: '', teamAway: 2, awayName: teams[2].name},
        {homeName: teams[1].name, teamHome: 1, win: '', draw: '', awayTeamWin: '', teamAway: 3, awayName: teams[3].name},
        // Round 3.
        {homeName: teams[0].name, teamHome: 0, win: '', draw: '', awayTeamWin: '', teamAway: 3, awayName: teams[3].name},
        {homeName: teams[1].name, teamHome: 1, win: '', draw: '', awayTeamWin: '', teamAway: 2, awayName: teams[2].name},
    ]

function matchWinnerTeamPoints(matchWinner) {
        matchWinner.points += 3;
        matchWinner.wins ++;
}
function matchLoserTeamPoints(matchLoser) {
        matchLoser.loses ++;
}
function matchDrawPoints(teamHome, teamAway) {
        teamHome.points ++;
        teamAway.points ++;
        teamHome.draws ++;
        teamAway.draws ++;
}

function createMatchesTable(matchesTableBody, matches) {
        cleaner(matchesTableBody);
          let win = bodyRow.insertCell(-1);
          if (match.win === true) {
              win.className = 'bg-success';
          }
          win.onclick = (e) => {
              match.draw = '';
              match.awayTeamWin = '';
              match.win = !match.win;
              createMatchesTable(matchesTableBody, matches);
              matchWinnerTeamPoints(teams[match.teamHome]);
              matchLoserTeamPoints(teams[match.teamAway]);
              cleaner(createStandingTable(standingTableBody, teams));
          }

Once the user click on win cell the team get 3 points and 1 win, but if the user click again the team will receive more 3 points and 1, but I want to remove the 3 points and 1 win, however I don't know how.

onclick javascript html
1 Answers

so the same button does two different mutation, is there a pattern to it? best to have two buttons & functions, one for add, one for remove. but you can make it with one method by supplying an argument with either negative or positive values. depending on action

e.g

function matchWinnerTeamPoints(match Winner, p, w) {
        matchWinner.points += p;
        matchWinner.wins += w;
    

}
zergski0
Related