title: Create a function to color a cell on click according to column
body: <p>I'm new to Javascript and currently working on a school project in which I have 2 tables: one is a ranking table, and the other is a football matches table, all created by manipulating the DOM (we aren't allowed to use the HTML document to do anything but the creation of an anchor element in this task).</p>
  <p>Whenever I click on a cell in the &quot;wins&quot; columns of the matches table, its background has to turn green. Meanwhile, in the ranking table, the click event has to add one victory and 3 points for the house team of that respective match, and 1 loss for the visitor team.
  If there's a tie, the cell in the &quot;Ties&quot; column has to be colored yellow, and should the house team lose, the cell in the &quot;Losses&quot; column has to be colored red.
  If I click again in the cell that has been colored, it should return to the previous state, as well as subtract the wins, points and losses that have been added to the ranking table.</p>
  <p>I was able to come up with a brute force solution, which is not pretty and is far from ideal, and anyone can see that this become easily unusable should the table become longer. What I wanted to know is if there's a way to use a loop to make this code shorter, instead of having to identify each and every cell, which was the only way I could figure out how to color the background of the cell in the matches table and update the ranking table accordingly.</p>
  <pre><code>(() =&gt; {
  
      let rankingList = [
          { Team: &quot;Team A&quot;, Points: 0, Wins: 0, Ties: 0, Losses: 0 },
          { Team: &quot;Team B&quot;, Points: 0, Wins: 0, Ties: 0, Losses: 0 },
          { Team: &quot;Team C&quot;, Points: 0, Wins: 0, Ties: 0, Losses: 0 },
          { Team: &quot;Team D&quot;, Points: 0, Wins: 0, Ties: 0, Losses: 0 }
      ];
  
      let matchesList = [
          { House: &quot;Team A&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team B' },
          { House: &quot;Team C&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team D' },
          { House: &quot;Team A&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team C' },
          { House: &quot;Team B&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team D' },
          { House: &quot;Team A&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team D' },
          { House: &quot;Team B&quot;, Win: '', Tie: '', Loss: '', Visitor: 'Team C' }
      ];
  
  
      function createTableHeading(table, text) {
          let header = table.createTHead();
          let line = header.insertRow();
          for (let index of text) {
              let th = document.createElement(&quot;th&quot;);
              let content = document.createTextNode(index);
              th.appendChild(content);
              line.appendChild(th);
              line.style = 'text-align: center;'
          }
      }
  
      function createTableBody(table, text) {
          for (let element of text) {
              let line = table.insertRow();
              for (index in element) {
                  let cell = line.insertCell();
                  let content = document.createTextNode(element[index]);
  
                  cell.appendChild(content);
                  cell.style = 'text-align: center;'
              }
          }
      }
  
      let $at = document.querySelector('#at'); // anchor element for HTML
  
      let $rankingTable = document.createElement('table');
      $rankingTable.id = 'ranking';
      $rankingTable.className = 'table';
  
      let $matchesTable = document.createElement('table');
      $matchesTable.id = 'matches';
      $matchesTable.className = 'table';
  
      $at.append($rankingTable);
      $at.append($matchesTable);
      let rankingText = Object.keys(rankingList[0]);
      let matchesText = Object.keys(matchesList[0]);
      createTableHeading($rankingTable, rankingText);
      createTableBody($rankingTable, rankingList);
      createTableHeading($matchesTable, matchesText);
      createTableBody($matchesTable, matchesList);
  
      let pointsA = document.getElementById('ranking').rows[1].cells[1];
      let pointsB = document.getElementById('ranking').rows[2].cells[1];
      let pointsC = document.getElementById('ranking').rows[3].cells[1];
      let pointsD = document.getElementById('ranking').rows[4].cells[1];
  
      let victoryA = document.getElementById('ranking').rows[1].cells[2];
      let victoryB = document.getElementById('ranking').rows[2].cells[2];
      let victoryC = document.getElementById('ranking').rows[3].cells[2];
      let victoryD = document.getElementById('ranking').rows[4].cells[2];
      
      let tieA = document.getElementById('ranking').rows[1].cells[3];
      let tieB = document.getElementById('ranking').rows[2].cells[3];
      let tieC = document.getElementById('ranking').rows[3].cells[3];
      let tieD = document.getElementById('ranking').rows[4].cells[3];
  
      let lossA = document.getElementById('ranking').rows[1].cells[4];
      let lossB = document.getElementById('ranking').rows[2].cells[4];
      let lossC = document.getElementById('ranking').rows[3].cells[4];
      let lossD = document.getElementById('ranking').rows[4].cells[4];
  
      // Team A x Team B
      let cell1 = document.getElementById('matches').rows[1].cells[1];
      let cell2 = document.getElementById('matches').rows[1].cells[2];
      let cell3 = document.getElementById('matches').rows[1].cells[3];
  
      // Team C x Team D
  
      let cell4 = document.getElementById('matches').rows[2].cells[1];
      let cell5 = document.getElementById('matches').rows[2].cells[2];
      let cell6 = document.getElementById('matches').rows[2].cells[3];
  
      // Team A x Team C
  
      let cell7 = document.getElementById('matches').rows[3].cells[1];
      let cell8 = document.getElementById('matches').rows[3].cells[2];
      let cell9 = document.getElementById('matches').rows[3].cells[3];
  
      cell1.addEventListener(&quot;click&quot;, setBackgroundColor);
      cell2.addEventListener(&quot;click&quot;, setBackgroundColor2);
      cell3.addEventListener(&quot;click&quot;, setBackgroundColor3);
      cell4.addEventListener(&quot;click&quot;, setBackgroundColor4);
      cell5.addEventListener(&quot;click&quot;, setBackgroundColor5);
      cell6.addEventListener(&quot;click&quot;, setBackgroundColor6);
      cell7.addEventListener(&quot;click&quot;, setBackgroundColor7);
      cell8.addEventListener(&quot;click&quot;, setBackgroundColor8);
      cell9.addEventListener(&quot;click&quot;, setBackgroundColor9);
  
      function updateTableVictory(pointsTeam1, victoryTeam1, lossTeam2,i,j){
          rankingList[i].Wins += 1;
          rankingList[j].Losses += 1;
          rankingList[i].Points += 3; 
          
          pointsTeam1.innerText = rankingList[i].Points;
          victoryTeam1.innerText = rankingList[i].Wins;
          lossTeam2.innerText = rankingList[j].Losses;
      }
  
      function updateTableTie(pointsTeam1, tieTeam1, pointsTeam2, tieTeam2, i,j){
          rankingList[i].Ties += 1;
          rankingList[j].Ties += 1;
          rankingList[i].Points += 1;
          rankingList[j].Points += 1;
          pointsTeam1.innerText = rankingList[i].Points;
          tieTeam1.innerText = rankingList[i].Ties;
          pointsTeam2.innerText = rankingList[j].Points;
          tieTeam2.innerText = rankingList[j].Ties;
      }
  
      function updateTableLoss(pointsTeam2, victoryTeam2, lossTeam1,i,j){
          rankingList[i].Losses += 1;
          rankingList[j].Wins += 1;
          rankingList[j].Points += 3; 
  
          pointsTeam2.innerText = rankingList[j].Points;
          victoryTeam2.innerText = rankingList[j].Wins;
          lossTeam1.innerText = rankingList[i].Losses;
      }
  
      function resetTableWin(pointsTeam1, victoryTeam1, lossTeam2,i,j){
          rankingList[i].Wins -= 1;
          rankingList[j].Losses -= 1;
          rankingList[i].Points -= 3; 
          
          pointsTeam1.innerText = rankingList[i].Points;
          victoryTeam1.innerText = rankingList[i].Wins;
          lossTeam2.innerText = rankingList[j].Losses;
      }
  
      function resetTableTie(pointsTeam1, tieTeam1, pointsTeam2, tieTeam2, i,j){
          rankingList[i].Ties -= 1;
          rankingList[j].Ties -= 1;
          rankingList[i].Points -= 1;
          rankingList[j].Points -= 1;
          pointsTeam1.innerText = rankingList[i].Points;
          tieTeam1.innerText = rankingList[i].Ties;
          pointsTeam2.innerText = rankingList[j].Points;
          tieTeam2.innerText = rankingList[j].Ties;
      }
  
      function resetTableLoss(pointsTeam2, victoryTeam2, lossTeam1,i,j){
          rankingList[i].Losses -= 1;
          rankingList[j].Wins -= 1;
          rankingList[j].Points -= 3; 
  
          pointsTeam2.innerText = rankingList[j].Points;
          victoryTeam2.innerText = rankingList[j].Wins;
          lossTeam1.innerText = rankingList[i].Losses;
      }
  
      // Team A x Team B
  
      // Victory
  
      function setBackgroundColor() {
          if(cell1.style.backgroundColor){
              cell1.style.backgroundColor = '';
              resetTableWin(pointsA,victoryA,lossB,0,1)
          } else {
              cell1.style.backgroundColor = '#85e085';
              updateTableVictory(pointsA,victoryA,lossB,0,1);
          }
      }
  
      // Tie
  
      function setBackgroundColor2() {
          if(cell2.style.backgroundColor){
              cell2.style.backgroundColor = ''
              resetTableTie(pointsA, tieA, pointsB, tieB,0,1);
          } else {
              cell2.style.backgroundColor = '#ffe066';
              updateTableTie(pointsA, tieA, pointsB, tieB,0,1);
          }
      }
  
      // Loss
  
      function setBackgroundColor3() {
          if(cell3.style.backgroundColor){
              cell3.style.backgroundColor = '';
              resetTableLoss(pointsB,victoryB,lossA,0,1)
          } else {
              cell3.style.backgroundColor = '#ff4d4d';
              updateTableLoss(pointsB,victoryB,lossA,0,1);
          }
      }
  
      // Team C x Team D
  
      // Victory 
  
      function setBackgroundColor4() {
          cell4.style.backgroundColor = '#85e085';
          updateTableVictory(pointsC,victoryC,lossD,2,3);
      }
  
      // Tie
  
      function setBackgroundColor5() {
          cell5.style.backgroundColor = '#ffe066';
          updateTableTie(pointsC,tieC,pointsD,tieD,2,3);
      }
  
      // Loss
  
      function setBackgroundColor6() {
          cell6.style.backgroundColor = '#ff4d4d';
          updateTableLoss(pointsD,victoryD,lossC,2,3);
      }
  
      // Team A x Team C
  
      // Victory
  
      function setBackgroundColor7() {
          cell7.style.backgroundColor = '#85e085';
          updateTableVictory(pointsA,victoryA,lossC,0,2);
      }
  
      // Tie
  
      function setBackgroundColor8() {
          cell8.style.backgroundColor = '#ffe066';
          updateTableTie(pointsA,tieA,pointsC,tieC,0,2);
      }
  
      // Loss
  
      function setBackgroundColor9() {
          cell9.style.backgroundColor = '#ff4d4d';
          updateTableLoss(pointsC,victoryC,lossA,0,2);
      }
  
  })()
  </code></pre>