Как я могу остановить isNaN от возврата ошибки для пустого поля?

Question

РЕДАКТИРОВАТЬ:

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

Когда пользователь вводит значение, вычисление (это просто проценты, а общие вычисления выполняются «onkeyup». Как вы можете видеть из-заэто они возвращают «NaN». Есть ли способ для меня, чтобы остановить поле, отображающее NaN, а затем только отображая итоговые значения?

Я думал об этом, и я мог просто получить все поля для вычислениякак только что-то вводится в последнее поле? Как вы думаете, извиняюсь перед всеми, кто, очевидно, ответил на мой вопрос, я все еще пытаюсь найти лучший подход, я просто не так хорош с JavaScript, как яс HTML / CSS !!

Answer 1

Вы должны попытаться написать функцию checkNumber, которая принимает введенное значение в качестве аргумента (вместо ссылки непосредственно на каждое поле внутри функции). Примерно так:

var checkNumber = function (testval) {
  if ( isNaN(testval) ) {
    alert('Bad!');
    // clean up field? highlight in red? etc.
  } else {
    // call your calculation function
  }
}

Затем свяжите эту функцию с событием keyup каждого поля формы. Есть несколько способов сделать это. Посмотрите на addEventListener() или функции привязки каркаса, такого как jQuery (.delegate() или .keyup(), например).

Обратите внимание, что если вы связываете функцию с событием, вам не нужно явно передавать аргумент значения. Вы должны иметь возможность работать со значением поля в функции через this.value. Так что у вас будет что-то вроде этого:

var checkNumber = function () {
  if ( isNaN( this.value ) ) {
    alert('Bad!');
    // clean up field? highlight in red? etc.
  } else {
    // call your calculation function
  }
}

А потом (с наивным связыванием по ID):

document.getElementById('id_of_a_field').addEventListener('keyup', checkNumber, true);

Answer 2

Как насчет использования Оценка короткого замыкания с Пример jsFiddle

РЕДАКТИРОВАТЬ для parseFloat:

function checkNumber() 
{
    var sInput = parseFloat(document.getElementById('sInput').value || 0);
    var dInput = parseFloat(document.getElementById('dInput').value || 0);
    var pInput = parseFloat(document.getElementById('pInput').value || 0);
    if (isNaN(sInput) || isNaN(dInput) || isNaN(pInput)) {
        alert("You entered an invalid character. Please press 'Reset' and enter a number.");
    }
}

Так что, если pInput не определен, просто используйте 0, но если у входа есть значение, используйте это значение.

SIDE ПРИМЕЧАНИЕ: пробел на самом деле является числом, +' '; // 0

Answer 3

Почему бы вам не использовать 3 разные функции или аргумент, чтобы определить, какие из входов нажимает пользователь? Если каждый из входов вызывает checkNumber (1), checkNumber (2) и checkNumber (3), вы можете проверять только те входные данные, которые использует пользователь, вместо проверки всех 3 одновременно.

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

Answer 4

Разве вы не можете просто инициализировать текстовое поле со значением по умолчанию, скажем, 0?