如何在 JavaScript 中添加和删除值 onclick 事件

Question

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.

Answer 1

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

eg

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

}