Суммирование значений двух динамических ячеек

Я изучаю HTML и JavaScript. Я составил таблицу футбольной лиги и хотел создать автоматическую систему для обновления значений в этой таблице. Это код таблицы:

<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>

А также этот скрипт:

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

Я хочу, чтобы он показывал разницу целей в начале (поэтому я добавил этот addEventListener), но это не так. Кроме того, идея функции состоит в том, что она динамически изменяет значения в ячейке разницы целей. Если я изменю голы в пользу, суммируя голы, забитые командой в ее последнем матче (я сделаю это, когда это будет сделано, также с голами против), я хочу, чтобы голы в пользу изменились на новое значение и автоматически рассчитать разницу мячей и отобразить ее в соответствующей ячейке. Как это сделать? При необходимости предоставлю более подробную информацию, может я что-то пропустил

Конечный пользователь не может изменить текст <td>. Вот почему вы должны использовать <input> и событие изменения входов

Esat ARSLAN 31.10.2018 13:48

если вы хотите без ввода, тогда можете взять диапазон и вызвать атрибут innerText

LDS 31.10.2018 13:51

@Esat ARSLAN Большое спасибо. Из вашего Ансвара я могу решить код Карлоса. Вы дали мне Idia, чтобы взять текст в td.

LDS 01.11.2018 04:49
0
3
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В соответствии с вашим вопросом вам, возможно, вам нужно найти разницу между двумя значениями, которые будут взяты из тестового поля в таблице. Я добавил два текстовых поля, а в событии 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>

Другие вопросы по теме