Как я могу предотвратить выход моей Нэн? - PullRequest
0 голосов
/ 25 марта 2020

Я пытаюсь создать приложение для составления бюджета, которое будет уведомлять пользователя об остатке после вычитания дохода с расходами, мое предупреждение постоянно говорит Nan. Я использую циклы для суммирования своих доходов и затрат от пользователя. Я включил свой код.

Спасибо!

function Maincalc(){
  var incomeVal = document.getElementsByClassName("income");
  var expenseVal = document.getElementsByClassName("expenses");
  var tot = 0;

  for (var i = 0; i < incomeVal.length; i++){
      if(parseInt(incomeVal[i].value))
          var incomeTot = tot + parseInt(incomeVal[i].value);
  }
  for (var i = 0; i < expenseVal.length; i++){
      if(parseInt(expenseVal[i].value))
          var expenseTot = tot + parseInt(expenseVal[i].value);
}
var x = incomeTot - expenseTot;
alert(x);
}

var btn = document.getElementById("submit");

btn.addEventListener("click", Maincalc);

Ответы [ 3 ]

0 голосов
/ 26 марта 2020

Убедитесь, что узлы DOM, возвращаемые document.getElementsByClassName("income") и document.getElementsByClassName("expenses"), содержат значение цифры c.

Какой тип узлов DOM представляют классы income и expenses? Пожалуйста, поделитесь фрагментом HTML

0 голосов
/ 26 марта 2020

Просто установите для переменной parseInt (...) и убедитесь, что это число с использованием if(!isNaN(val). См. Мой пример ниже.

Примечание: внутри блоков for были объявлены некоторые переменные, которые не имели большого смысла.

function Maincalc() {
  var incomeVal = document.getElementsByClassName("income");
  var expenseVal = document.getElementsByClassName("expenses");
  var incomeTot = 0;
  var expenseTot = 0;

  for (var i = 0; i < incomeVal.length; i++) {
    let val = parseInt(incomeVal[i].value);
    if (!isNaN(val))
      incomeTot += val;
  }
  for (var i = 0; i < expenseVal.length; i++) {
    let val = parseInt(expenseVal[i].value)
    if (!isNaN(val))
      expenseTot += val;
  }
  var x = incomeTot - expenseTot;
  alert(x);
}

Maincalc();
<input class="income" value="12" />
<input class="income" value="12" />
<input class="income" value="a" />

<input class="expenses" value="5"/>
<input class="expenses" value="5"/>
<input class="expenses" value="b"/>
0 голосов
/ 25 марта 2020

Трудно сказать, не увидев HTML или работающего примера, но я бы изменил пару вещей.

Как говорили другие комментаторы, используйте console.log, чтобы увидеть частичное выполнение вашего кода. и посмотреть, где число является Nan.

Я бы также изменил эту строку, где ошибка, вероятно, происходит:

     if(parseInt(expenseVal[i].value))

на:

  if (!isNaN(expenseVal[i].value)) {

To убедитесь, что номер действителен и является числом; Кроме того, при использовании parseInt передайте второй аргумент, чтобы убедиться, что числа анализируются как действительные, и об ошибках, как это parseInt(incomeVal[i].value, 10). Также не имеет отношения, но для этого случая также подойдет карта или функция сокращения.

...