时间戳

首页 > 解决方案 > Summing 2 dynamic cell values

javascript - Summing 2 dynamic cell values

问题描述

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 class= "promotion_row" style="background:#01DF01;">
        <td id="position">1</td>  <!-- Position -->
        <td id="team" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td id="played">11</td> <!-- Played Matches -->
        <td id="wins">8</td>  <!-- Wins -->
        <td id="draws">1</td>  <!-- Draws -->
        <td id="loses">2</td>  <!-- Loses -->
        <td id="goalsInFavour" value="14" onChange="Count(btn1)">14</td> <!-- Goals in favour -->
        <td id="goalsAgainst" value="6" onChange="Count(btn2)">6</td>  <!-- Goals against -->
        <td id="goalsDifference" value="">8</td>  <!-- Goals Difference -->
        <td id="Points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>

And also this script:

function Count(btn1, btn2)
{
    var x = btn1.value;
    var y = btn2.value;
    var res = document.getElementById("goalsDifference");

    if(res.value == "")
    {
        res.value = parseInt(btn1.value);
    }

    res.value = parseInt(res.value) - parseInt(y);
}

window.addEventListener("load",Count(btn1, btn2))

What I want to do is that it shows the goals difference at start (that's why I added that addEventListener), but it doesn't.
Also, the idea of the function is that it changes dynamically the values in goals difference cell. If I change the goals in favour by summing the goals scored by the team in its last match (I will do that when this is done, also with the goals against), I want the goals in favour to change to the new value and automatically calculate the goals difference and show it on its respective cell.
Is there a way to do so? I will provide more details if needed, maybe I skipped something

标签： javascripthtml

解决方案

根据您的问题，您可能需要找到两个值之间的差异，这些值将从表中的测试框中获取。我添加了两个文本框，并在 keyup 事件中找到不同的

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      
   </head>
   <body>
      <div id = "app">
    <table width="60%" border="0" style="text-align:center;">
    <tr class= "promotion_row" style="background:#01DF01;">
        <td id="position">1</td>  <!-- Position -->
        <td id="team" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td id="played">11</td> <!-- Played Matches -->
        <td id="wins">8</td>  <!-- Wins -->
        <td id="draws">1</td>  <!-- Draws -->
        <td id="loses">2</td>  <!-- Loses -->
        <td><input type="text" value="14" id="goalsInFavour" onkeyup="return Count();" /></td> <!-- Goals in favour -->
        <td><input type="text" value="10" id="goalsAgainst"  onkeyup="return Count();" /></td>  <!-- Goals against -->
        <td><span id="goalsDifference"></span></td>  <!-- Goals Difference -->
        <td id="Points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>
</div>
<script>
    function Count() {
      
        var x = document.getElementById("goalsInFavour").value;
        var y = document.getElementById("goalsAgainst").value;
        var res = document.getElementById("goalsDifference");
        
        res.innerText = parseInt(x) - parseInt(y);
    }

</script>
</body>
</html>

推荐阅读