jQuery .val () возвращает значения, разделенные запятыми, как неопределенные

Question

Я пытаюсь вычесть 2 столбца и получить значение в 3-м столбце. У меня есть следующий код, который работает, пока в поле ввода не используются значения, разделенные запятыми.

const sum = $inputs => $inputs.get().reduce((a, el) => a + (parseInt(el.value, 10) || 0), 0);

function calcTableBox() {
  const $table = $('#TableBox');
  const $row = $table.find('> div');

  $row.each(function() {
    const $this = $(this);
    const limiter = parseInt($this.find('.limiter').val(), 10); // parseInt at radix decimal
    const used    = parseInt($this.find('.used').val(), 10);
    const remaining = limiter - used;
    if (!isNaN(remaining)) $this.find('.remaining').val( remaining );
  });

  $table.find('.totallimiter').val(sum($table.find('.limiter')));
  $table.find('.totalused').val(sum($table.find('.used')));
  $table.find('.totalrem').val(sum($table.find('.remaining')));
}

jQuery($ => { // DOM ready

  $(".limiter, .used").on("input", calcTableBox);
  calcTableBox(); // Init

});


function addComma(values) {
    var v = values.value && parseFloat(values.value.replace(/,/g, ''));
    values.value = v.toLocaleString("en-US");
}

.TableBox {
  display: table;
  border-spacing: 6px;
}

.TableBox input[type=text] {
  max-width: 80px;
}

.TableBox>div {
  display: table-row;
  border-spacing: 5px
}

.TableBox>div>div {
  display: table-cell;
  margin: 4px;
}

[readonly] {
  color: #aaa;
}

<div id="TableBox" class="TableBox" style="width: 100%;">
  <div>
    <div></div>
    <div>Limiter</div>
    <div>Used</div>
    <div>Remaining</div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value="32"></div>
    <div><input type="text" class="used" value="23"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value=""  onkeyup="addComma(this);"></div>
    <div><input type="text" class="used" value=""  onkeyup="addComma(this);"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value="5"  onkeyup="addComma(this);"></div>
    <div><input type="text" class="used" value="3"  onkeyup="addComma(this);"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value=""  onkeyup="addComma(this);"></div>
    <div><input type="text" class="used" value=""  onkeyup="addComma(this);"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div>Total Cycles: </div>
    <div><input type="text" class="totallimiter" readonly></div>
    <div><input type="text" class="totalused" readonly></div>
    <div><input type="text" class="totalrem" readonly></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Здесь первая строка работает нормально, так как я не добавил к значениям запятые. Тем не менее, во всех других строках я добавляю запятые. Поскольку значение является строкой, я удаляю запятые и выполняю parseInt для него.

function calcTableBox() {
  const $table = $('#TableBox');
  const $row = $table.find('> div');

  $row.each(function() {
    const $this = $(this);
   // const limiter = parseInt($this.find('.limiter').val(), 10); // parseInt at radix decimal

    const limiter = $this.find('.limiter').val();
      limiter = limiter.replace(/,/g, "");      
      limiter = parseInt(limiter);

   // const used    = parseInt($this.find('.used').val(), 10);
    const used = jQuerythis.find(".used").val();    
      used = used.replace(/,/g, "");    
      used = parseInt(used);

    const remaining = limiter - used;
    if (!isNaN(remaining)) $this.find('.remaining').val( remaining );
  });

  $table.find('.totallimiter').val(sum($table.find('.limiter')));
  $table.find('.totalused').val(sum($table.find('.used')));
  $table.find('.totalrem').val(sum($table.find('.remaining')));
}

Проблема в том, что когда я добавляю запятые, он возвращает NaN для моих значений. Я читаю посты об этом, и он просто просит меня установить идентификатор окна и использовать его, чтобы получить значения, которые я уже делаю. Любая помощь приветствуется! Спасибо.

Answer 1

Подведение итогов комментариев ...

У вас есть несколько одновременных проблем, которые сговорились торпедировать ваш код. Вам нужно обратить внимание на сообщения об ошибках и узнать, как следовать консоли к исходному коду , чтобы понять, почему ваш код ломается, но вот что пока очевидно:

1. Вы обращались к свойствам, как если бы они были функциями (.length()) ( Вы с тех пор отредактировали этот вопрос, но это было в оригинальном сообщении )
2. Вы переназначали значения в const переменные, что недопустимо.
3. Вы перебирали строку заголовка, которая возвращала undefined для .val(), так как .find(".limiter") не вернул никаких элементов, из-за чего limiter.replace бросил ошибка, поскольку значения undefined не имеют функции .replace.
4. Это может быть просто опечатка, но ваша переменная jQuerythis не определена. Я считаю, что вы имели в виду $this, но вам нужно исправить это, прежде чем ваш код будет работать.

Для третьей ошибки в моем списке, вы должны быть в состоянии решить ее с помощью простого проверьте, чтобы убедиться, что у вас действительно есть строковые значения. Если вы не можете пропустить строку:

  $row.each(function() {
    const $this = $(this),
        $limiter = $this.find('.limiter'),
        $used = $this.find(".used");
    // Don't process this row if the limiter or used elements are missing:
    if ($limiter.length === 0 || $used.length === 0) return;

    // You might want to add additional checks to make sure that
    // $limiter.val() returns a string, but I assume from your
    // HTML that it is safe to assume a string so long as the
    // element was found.
    const limiterValue = $limiter.val().replace(/,/g, "");
      limiterInt = parseInt(limiterValue);

    const usedValue = $used.val().replace(/,/g, "");
      usedInt = parseInt(usedValue);

    // If either limiterInt or usedInt are NaN, then skip this row.
    // The numbers are invalid.
    // Or maybe you'll want to handle it a different way... that's
    // up to you.
    if (isNan(limiterInt) || isNan(usedInt)) return;

    const remaining = limiterInt - usedInt;
    $this.find('.remaining').val( remaining );
  });