Добавление номера результата в NaN - PullRequest
Новая
       4

Добавление номера результата в NaN

0 голосов
/ 07 января 2020 

<script>
function myFunction(val) {
    const ele = document.querySelectorAll('input');
    let sum = 0;
    ele.forEach(input => {
        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
</script>

<form action="test.php" method="POST" enctype="multipart/form-data">

<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>

</form>

Почему результат равен NaN? Но если я удаляю значение = "Submit" в последней 5-й строке, то все работает нормально. Почему? и что я должен сделать, чтобы решить эту проблему?

Ответы [ 3 ]

1 голос
/ 07 января 2020

Поскольку вы выбираете все входные теги, вы должны указать c при выборе как querySelectorAll('input[type="text"]'). поэтому он будет выбирать только теги ввода текста. Попробуйте это 

<!DOCTYPE html>
<html>
<body>
<script>

function myFunction(val) {
    const ele = document.querySelectorAll('input[type="text"]');
    let sum = 0;
    ele.forEach(input => {

        sum += input.value ? parseFloat(input.value) : 0;
    });
    document.getElementById('result').textContent = sum.toFixed(2);
}
</script>


<form action="test.php" method="POST" enctype="multipart/form-data">

<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name= "submit" id="submit" value="Submit"/></p>

</form>
</body>
</html>
1 голос
/ 07 января 2020

Ваш 

const ele = document.querySelectorAll('input');

будет перебирать все входные данные, включая <input type="submit" name= "submit" id="submit" value="Submit"/>.

Если вы не используете value="Submit", этот элемент не не имеет реального .value, поэтому по умолчанию используется пустая строка: 

console.log(submit.value);
console.log(submit.value.length);
<input type="submit" name="submit" id="submit">

Напротив, <input value="Submit"/> будет иметь .value из Submit, который нельзя превратить в число.

Выберите только ваши входы с input классами вместо: 

function myFunction() {
  const ele = document.querySelectorAll('input.input');
  let sum = 0;
  ele.forEach(input => {
    sum += input.value ? parseFloat(input.value) : 0;
  });
  document.getElementById('result').textContent = sum.toFixed(2);
}
<form action="test.php" method="POST" enctype="multipart/form-data">

  <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
  <input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
  <p id="result"></p>
  <br>
  <p><input type="submit" name="submit" id="submit" value="Submit" /></p>

Также обратите внимание, что дубликаты ID недопустимы HTML, и обработчики событий должны быть правильно подключены с использованием Javascript вместо использования встроенных обработчиков: 

const inputs = document.querySelectorAll('input.input');
inputs.forEach((input) => {
  input.addEventListener('keydown', () => {
    const sum = [...inputs].reduce((a, input) => a + Number(input.value), 0);
    document.getElementById('result').textContent = sum.toFixed(2);
  });
});
<form action="test.php" method="POST" enctype="multipart/form-data">

  <input type="text" class="input">
  <input type="text" class="input">
  <p id="result"></p>
  <br>
  <p><input type="submit" value="Submit"></p>
</form>
0 голосов
/ 07 января 2020

Поскольку document.querySelectorAll('input'); выбирает все входы, включая кнопку отправки, которая имеет значение = 'submit', а значение submit не является числом (NAN). Когда вы удаляете атрибут значения из кнопки отправки, он ничего не возвращает.

...