CODEWITHSUNDEEP
javascripthtml
Carlos Vega
Carlos Vega

Reputation: 15

HTML table cell value counter

I am learning HTML and JavaScript. I did a football league table and I was willing to make an automatic system to update the values on that table.
This is the code of the table:

<table width="60%" border="0" style="text-align:center;">
    <tr style="background:#01DF01;">
        <td>1</td>  <!-- Position -->
        <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td>11</td> <!-- Played Matches -->
        <td>8</td>  <!-- Wins -->
        <td>1</td>  <!-- Draws -->
        <td>2</td>  <!-- Loses -->
        <td>14</td> <!-- Goals in favour -->
        <td>6</td>  <!-- Goals against -->
        <td>8</td>  <!-- Goals Difference -->
        <td><b>25</b></td>  <!-- Points -->
    </tr>
</table>

I also have some buttons to automate the values:

<button onclick="Won()">Won</button>
<button onclick="Tied()">Tied</button>
<button onclick="Lost()">Lost</button>

What I wanted to do for the moment is that, if I click the "Won" button, the function Won() takes the value corresponding to the played matches and adds 1, becoming it 12 in this case. I tried it with the following function in JavaScript:

function Won()
{
    var n1 = parseFloat(document.getElementById("n1").value);
    var n2 = 1;

    document.getElementById("n1").value = n1 + n2;
}

Anyone can help me? I can provide details or try explain better anything, as English is not my native language and I can make mistakes.

Upvotes: 0

Views: 381

Answers (5)

yqlim
yqlim

Reputation: 7080

Your attempt is pretty close!

One thing though, I don't see any elements with id="n1" anywhere in your code provided. Maybe it's in your actual code base, but it's not showing here so I'm gonna assume you have one in your code base.

Below is the working code with explanation of what you did incorrectly and suggestions:

// Here I am wrapping your function with one main function
// So that you don't have to repeat your code for similar operations
function Won(){
  return AddScoreTo('wins')
}

function Tied(){
  return AddScoreTo('draws')
}

function Lost(){
  return AddScoreTo('loses')
}

function AddScoreTo(field){
    // I am breaking down the steps one by one
    // So that it can be easily understood
    // You can optimize them your way
    
    // Get the table by id
    var leagueTable = document.querySelector('#league');
    
    // Get the target cell from the table by className 
    var targetCell = leagueTable.querySelector('.' + field);
    
    // Get the content inside the target cell
    // .value is for input element only
    var value = parseInt(targetCell.textContent);

    // Change the content of the target cell
    targetCell.textContent = value + 1;
}
<!-- Added id to table -->
<table id="league" width="60%" border="0" style="text-align:center;">
    <!-- Added classes to easily identify them in JS or CSS -->
    <tr class="row" style="background:#01DF01;">
        <td class="position">1</td>  <!-- Position -->
        <td class="logo" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td class="playedMatches">11</td> <!-- Played Matches -->
        <td class="wins">8</td>  <!-- Wins -->
        <td class="draws">1</td>  <!-- Draws -->
        <td class="loses">2</td>  <!-- Loses -->
        <td class="goalsInFavour">14</td> <!-- Goals in favour -->
        <td class="goalsAgainst">6</td>  <!-- Goals against -->
        <td class="goalsDifference">8</td>  <!-- Goals Difference -->
        <td class="points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>

<button onclick="Won()">Won</button>
<button onclick="Tied()">Tied</button>
<button onclick="Lost()">Lost</button>

Note

The code above will not work correctly when you have multiple rows. In that case, you should use ids on each row and find respective fields through the target row instead of directly from table.

Upvotes: 3

Vikas Gupta
Vikas Gupta

Reputation: 1233

You just need to pass id to corresponding each column to update the value dynamically.

This is link to working example 

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <table width="60%" border="0" style="text-align:center;">
        <tr style="background:#01DF01;">
            <td>1</td>  <!-- Position -->
            <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
            <td id="n1">11</td> <!-- Played Matches -->
            <td>8</td>  <!-- Wins -->
            <td>1</td>  <!-- Draws -->
            <td>2</td>  <!-- Loses -->
            <td>14</td> <!-- Goals in favour -->
            <td>6</td>  <!-- Goals against -->
            <td>8</td>  <!-- Goals Difference -->
            <td><b>25</b></td>  <!-- Points -->
        </tr>
    </table>
    <button onclick="Won()">Won</button>
    <button onclick="Tied()">Tied</button>
    <button onclick="Lost()">Lost</button>
    </body>
    </html>
<script>
    function Won(){
          var n1= Number(document.getElementById("n1").innerText)
          n1 = n1 + 1;
          document.getElementById("n1").innerText =n1;
        }

Upvotes: 0

Electrox Mortem
Electrox Mortem

Reputation: 319

function Won(){
    var n1 = parseFloat(document.getElementById("won").textContent);
    document.getElementById("won").textContent = n1 + 1;
}
function Tied(){
    var n1 = parseFloat(document.getElementById("draw").textContent);
    document.getElementById("draw").textContent = n1 + 1;
}
function Lost(){
    var n1 = parseFloat(document.getElementById("loss").textContent);
    document.getElementById("loss").textContent = n1 + 1;
}
<table width="60%" border="0" style="text-align:center;">
    <th>
        <td>Team</td>
        <td>Played Matches</td>
        <td>Wins</td>
        <td>Draws</td>
        <td>Losses</td>
        <td>Goals in favour</td>
        <td>Goals against</td>
        <td>Goals Difference</td>
        <td>Points</td>
    </th>
    <tr style="background:#01DF01;">
        <td>1</td>  <!-- Position -->
        <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td>11</td> <!-- Played Matches -->
        <td id="won">8</td>  <!-- Wins -->
        <td id="draw">1</td>  <!-- Draws -->
        <td id="loss">2</td>  <!-- Loses -->
        <td>14</td> <!-- Goals in favour -->
        <td>6</td>  <!-- Goals against -->
        <td>8</td>  <!-- Goals Difference -->
        <td><b>25</b></td>  <!-- Points -->
    </tr>
</table>
<button onclick="Won()">Won</button>
<button onclick="Tied()">Tied</button>
<button onclick="Lost()">Lost</button>

Here is one that works. .value only works for inputs. for regular elements, you need .textContent. ps: you may wanna change up the css on that table. the green is wierd

Upvotes: 0

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

Seems like you need to use innerText property instead of value:

function Won() {
    var cell = document.getElementById('n1');
    var currentValue = parseInt(cell.innerText);
    cell.innerText = currentValue + 1;
}

Also make sure that you have an element with id="n1" in your HTML markup as now it seems to be missing:

<td id="n1">8</td>  <!-- Wins -->

Upvotes: 0

doodhwala
doodhwala

Reputation: 358

You'll have to provide an id field in the HTML.

E.g. <td>8</td> <!-- Wins --> will change to <td I'd="n1">8</td>

Upvotes: 0

Related Questions