How to remove values when disable button on JavaScript

João Victor Oliveira 0
Viewed 63

I've two tables, non-clickable teams and clickable matches.

The tables image

The code on my GitHub

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},
    ]

Three functions one to add up points and wins.

function matchWinnerTeamPointsWins(matchWinner) {
        matchWinner.points += 3;
        matchWinner.wins ++;
}

Another to add losses.

function matchLoserTeamDefeats(matchLoser) {
        matchLoser.loses ++;
}

And to add points and draw.

function matchDrawPointsDraws(teamHome, teamAway) {
        teamHome.points ++;
        teamAway.points ++;
        teamHome.draws ++;
        teamAway.draws ++;
}

Then I create the matches table and add the click event.

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));
          }

The idea is when the user click on home team win, draw or visitor team win I add the values on the teams, however when the user click again I return with the default values.

But what's happen is when the user click twice the values only sum and don't return.

For example:

let teams = [
        {name: 'Roma', points: 0, wins: 0, draws: 0, loses: 0},
    ]
// user click on home team win
let teams = [
        {name: 'Roma', points: 3, wins: 1, draws: 0, loses: 0},
    ]
// user click on home team win again
    // what's happen
let teams = [
        {name: 'Roma', points: 6, wins: 2, draws: 0, loses: 0},
    ]
    // what's expected
let teams = [
        {name: 'Roma', points: 0, wins: 0, draws: 0, loses: 0},
    ]
onclick frontend twitter-bootstrap javascript html
1 Answers

You call matchWinnerTeamPointsWins() each time it is clicked, which will increase the objects wins and points. If you want to reset the wins and points on multiple clicks you could reset it before calling the function, as such:

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