Попытка суммировать html таблиц приводит к тому, что числа объединяются как строки?

Question

Пытаясь получить общую сумму значений столбца таблицы html, моя переменная возвращает объединенные строки: вместо 1 + 2 + 3 = 6 я вижу 1 + 2 + 3 = 123.

Голосование msgstr "Значения столбцов увеличиваются с помощью вызова ajax, когда пользователи нажимают на цвета, и это правильно. Но я также надеюсь увидеть сумму всех значений при нажатии «итого».

Jquery:

$('#total').on('click', function() {
  var sumofval = 0;
  $(".val").each(function () {
    sumofval = sumofval + ($(this).html());
    $('#totalr').html(sumofval);
    console.log(sumofval);
  });
});

Таблица HTML Color-Votes:

<table id="tcol" style="width:60%;">
    <thead>
        <tr>
            <th>Color</th>
            <th>Votes</th>
        </tr>
    </thead>
    <tr>
        <td id="red"><a href="#">Red</a></td>
        <td id="redr" class="val"></td>
    </tr>
    <tr>
        <td id="orange"><a href="#">Orange</a></td>
        <td id="oranger" class="val"></td>
    </tr>
    <tr>
        <td id="yellow"><a href="#">Yellow</a></td>
        <td id="yellowr" class="val"></td>
    </tr>
    <tr>
        <td id="green"><a href="#">Green</a></td>
        <td id="greenr" class="val"></td>
    </tr>
    <tr>
        <td id="blue"><a href="#">Blue</a></td>
        <td id="bluer" class="val"></td>
    </tr>
    <tr>
        <td id="indigo"><a href="#">Indigo</a></td>
        <td id="indigor" class="val"></td>
    </tr>
    <tr>
        <td id="total"><a href="#">TOTAL</a></td>
        <td id="totalr"></td>
    </tr>
</table>

Answer 1

1. Конвертировать в число. (Вы можете сделать это, добавив + в начале или используя функцию parseInt)

2. sumofval = sumofval +.. можно заменить на sumofval+=..

3. do $('#totalr').html(sumofval); на каждом шаге в l oop является избыточным. лучше сделать это один раз в конце

$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function () {
    sumofval += +$(this).html() || 0;
});
$('#totalr').html(sumofval);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tcol" style="width:60%;">
<thead>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>
</thead>
<tr>
<td id="red"><a href="#">Red</a></td>
<td id="redr" class="val"></td>
</tr>
<tr>
<td id="orange"><a href="#">Orange</a></td>
<td id="oranger" class="val">2</td>
</tr>
<tr>
<td id="yellow"><a href="#">Yellow</a></td>
<td id="yellowr" class="val">3</td>
</tr>
<tr>
<td id="green"><a href="#">Green</a></td>
<td id="greenr" class="val">4</td>
</tr>
<tr>
<td id="blue"><a href="#">Blue</a></td>
<td id="bluer" class="val">5</td>
</tr>
<tr>
<td id="indigo"><a href="#">Indigo</a></td>
<td id="indigor" class="val">6</td>
</tr>
<tr>
<td id="total"><a href="#">TOTAL</a></td>
<td id="totalr"></td>
</tr>

Также вы можете сделать:

$('#totalr').html(Array.from($(".val")).reduce(function(a,b){return (+$(b).html() ||0)+a}, 0));

Answer 2

Если один термин не является числом, JavaScript будет рассматривать все как строку и вместо этого объединять значения. Таким образом, вы должны убедиться, что все значения, которые вы добавляете, являются числовыми типами:

$('#total').on('click', function() {

    var sumofval = 0;
    $(".val").each(function () {
        sumofval = sumofval + getInt($(this).html());
        $('#totalr').html(sumofval);  //this line should be moved outside .each loop
        console.log(sumofval);
    )};

});

function getInt(t){
    if(!isNaN(parseFloat(t)) && isFinite(t)){
        return parseInt(t,10);
    }
    return 0;
}

Answer 3

Как предложено, используйте parseInt для разбора строк и преобразования их в целые числа. Затем вы можете добавить их в sumofval правильно.

$('#total').on('click', function() {
  var sumofval = 0;
  $(".val").each(function() {
      if ($(this).text() !== '') {
      sumofval = sumofval + parseInt(($(this).text()));
      $('#totalr').text(sumofval);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tcol" style="width:60%;">
  <thead>
    <tr>
      <th>Color</th>
      <th>Votes</th>
    </tr>
  </thead>
  <tr>
    <td id="red"><a href="#">Red</a></td>
    <td id="redr" class="val">2</td>
  </tr>
  <tr>
    <td id="orange"><a href="#">Orange</a></td>
    <td id="oranger" class="val"></td>
  </tr>
  <tr>
    <td id="yellow"><a href="#">Yellow</a></td>
    <td id="yellowr" class="val">3</td>
  </tr>
  <tr>
    <td id="green"><a href="#">Green</a></td>
    <td id="greenr" class="val">3</td>
  </tr>
  <tr>
    <td id="blue"><a href="#">Blue</a></td>
    <td id="bluer" class="val">3</td>
  </tr>
  <tr>
    <td id="indigo"><a href="#">Indigo</a></td>
    <td id="indigor" class="val">3</td>
  </tr>
  <tr>
    <td id="total"><a href="#">TOTAL</a></td>
    <td id="totalr"></td>
  </tr>
</table>

Также рассмотрите возможность использования .text(), чтобы получить значение элемента вместо .html().