Расчет Javascript возвращает NaN, когда поля ввода пусты [дубликаты]

Мне нужно сделать небольшой расчет, используя значения из полей формы с использованием javascript. Формула для расчета приведена ниже:

totalIncome = income1 + income2 *0.7 + income3/48 + (income4 * 0.7)/48;

Значения income1, income2, income3 и income4 могут быть нулевыми, а поля могут быть пустыми.

Мой код ниже:

 <tr id="row">
  <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>

Формулярный сценарий, который я использовал для своей формулы, приведен ниже:

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = parseInt(income1.value, 10) + parseInt(income2.value, 10)* 0.7  + parseInt(income3.value, 10)/48 + (parseInt(income4.value, 10)*0.7)/48;


  });

});

Однако я не уверен, почему totalIncome станет NaN, когда некоторые поля пусты.


javascript html
person xhinvis    schedule 30.06.2017    source источник
comment
Да, это опечатка   -  person xhinvis    schedule 30.06.2017

Ответы (4)


arrow_upward
5
arrow_downward

Вы можете использовать ||0 в сочетании с вашим вызовом parseInt(), чтобы убедиться, что возвращаемое значение всегда является числом, а в случае пустого поля <input> — 0.

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input) {

  input.addEventListener("blur", function() {
    totalIncome.value =
      (parseInt(income1.value, 10) || 0) +
      (parseInt(income2.value, 10) || 0) * 0.7 +
      (parseInt(income3.value, 10) || 0) / 48 +
      ((parseInt(income4.value, 10) || 0) * 0.7) / 48;
  });
});
<table>
  <tr id="row">
    <td>No. of Dependant(s)</td>
    <td><input type="text" id="income1" value=""></td>
    <td><input type="text" id="income2" value=""></td>
    <td><input type="text" id="income3" value=""></td>
    <td><input type="text" id="income4" value=""></td>
    <td><input type="text" id="totalIncome" readonly></td>
  </tr>
</table>

Обновлять

После того, как OP попросил об этом, вы можете отобразить toFixed(2), немного изменив расчет для totalIncome.value следующим образом:

totalIncome.value = (
  (parseInt(income1.value, 10) || 0) +
  (parseInt(income2.value, 10) || 0) * 0.7 +
  (parseInt(income3.value, 10) || 0) / 48 +
  ((parseInt(income4.value, 10) || 0) * 0.7) / 48).toFixed(2);
person Angelos Chalaris    schedule 30.06.2017
comment
есть ли способ отображать только toFixed(2)? - person xhinvis; 30.06.2017
comment
@xhinvis Я только что обновил ответ этим. Посмотри! - person Angelos Chalaris; 30.06.2017

arrow_upward
3
arrow_downward

Как описано здесь

Целое число, полученное из заданной строки. Если первый символ не может быть преобразован в число, возвращается NaN.

Поэтому вам нужно указать значение по умолчанию (например, 0), если оно возвращает null. Использование parseInt(income.value || 0) может помочь.

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = parseInt(income1.value || 0, 10) 
                + parseInt(income2.value || 0, 10)* 0.7 
                + parseInt(income3.value || 0, 10)/48 
                + (parseInt(income4.value || 0, 10)*0.7)/48;

  });

});
<table>
<tr id="row">
    <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>
</table>

person Yongfeng    schedule 30.06.2017

arrow_upward
2
arrow_downward

Просто укажите значение по умолчанию, когда значение в текстовом поле равно NaN.

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input){
  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = (parseInt(income1.value, 10) || 0) + (parseInt(income2.value, 10) || 0 )* 0.7  + (parseInt(income3.value, 10)|| 0)/48 + ((parseInt(income4.value, 10) || 0 )*0.7)/48;

  console.log(totalIncome.value);
  });

});
<table>
<tr id="row">
  <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>
</table>

person Hassan Imam    schedule 30.06.2017

arrow_upward
1
arrow_downward

Откуда: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Целое число, полученное из заданной строки. Если первый символ не может быть преобразован в число, возвращается NaN.

Вы должны преобразовать пустые значения в значения по умолчанию, прежде чем пытаться использовать их в parseInt.

А также проверка результата parseInt перед его использованием в математическом выражении, если вы хотите показать ошибку для неверных значений.

person Ryan The Leach    schedule 30.06.2017