Проверка типа ввода в JS

Question

Я использую команду typeof, чтобы убедиться, что только 1 из 2 полей ввода этого калькулятора температуры (по Цельсию в / из Фаренгейта) заполнено данными, и это должно быть число.Если введенный номер не является допустимым или оба поля заполнены, приложение выдаст сообщение об ошибке.

Проблема: ничто не удовлетворяет этому условию - errorMessage всегда отображается, даже если я ввожу правильное число.

Является ли typeof правильным решением этой проблемы?Если это так, почему этот код не работает?

document.getElementById('temperature-form').addEventListener('submit', calculateResult);

function calculateResult(e) {
    e.preventDefault();
    const celsiusInput = document.getElementById('celsius');
    const fahrenheitInput = document.getElementById('fahrenheit');
    let resultOutput = document.getElementById('result');
    // validate input data type and calculate result  
    if ((typeof celsiusInput === 'number') && (fahrenheitInput === null)) { 
        resultOutput.value = (celsiusInput.value * 1.8 + 32) + ' Fahrenheit';
    } else if ((celsiusInput === null) && (typeof fahrenheitInput === 'number')) {
        resultOutput.value = ((fahrenheitInput.value - 32)/1.8) + ' Celsius';  
    } else {
        errorMessage('Please add a number in one of these fields');
    } 
}

Большое спасибо!

Answer 1

При выполнении const celsiusInput = document.getElementById('celsius') вы получаете DOM-элемент , а не значение.Чтобы получить значение de, вам нужно проверить свойство value .

Так что в итоге вы получите что-то вроде этого:

const celsiusInput = document.getElementById("celsius")
const celsiusValue = celsiusInput.value

Сейчасесли мы сделаем typeof celsiusValue, мы всегда получим string, потому что текстовые / числовые входы всегда принимают текст (проверьте тип ввода свойство для получения дополнительной информации).

Правильный способ проверитьесли есть цифры или буквы, используется Регулярные выражения .

Я оставлю простой пример, который будет для вас отправной точкой:

const celsiusInput = document.getElementById("celsius")
const celsiusValue = celsiusInput.value
if(/\D/.test(celsiusValue)) {
  alert("There is something that's not a number in the Celsius input!")
}

Answer 2

Прежде всего, выполнив сравнение, подобное этому fahrenheitInput === null, вы сравниваете элемент DOM со значением null.

Это будет оцениваться как true, если элемент DOM никогда не существовал.

Во-вторых, метод typeof всегда будет иметь значение String для типов элементов DOM, так что опять-таки это всегда будет false.

Чтобы действительно получить то, что вы хотите, вы должны сделать правильную проверку

1. Чтобы проверить, предоставлены ли оба поля ввода, просто проверьте длину значений, чтобы просмотреть:

   if (fahrenheitInput.length> 0 && celsiusInput.length> 0) // fail

2. Если задан только fahrenheitInput:

   if (!isNaN (Number (fahrenheitInput)) // преобразовать

3. если задан только celsiusInput:

   if (! isNaN (Number (celsiusInput)) // преобразовать

4. Наконец, если все проверки, указанные выше, не проверяют нашу, не удалось

Надеюсь, это было объяснительным.

Answer 3

Вы можете проверить свойства значений каждого входа, чтобы увидеть, являются ли они числами, используя функцию isNaN() следующим образом:

function calculateResult(e) {
    e.preventDefault();
    //Get the value of each input box
    const celsiusValue = document.getElementById('celsius').value;
    const fahrenheitValue = document.getElementById('fahrenheit').value;
    //Get the result element
    let resultOutput = document.getElementById('result');

    // validate input data type and calculate result  
    if(!isNaN(celsiusValue) && (fahrenheitValue === null || fahrenheitValue === "")){
        //Only celsiusValue has a valid number
        resultOutput.value = (celsiusValue * 1.8 + 32) + ' Fahrenheit';
    }else if(!isNaN(fahrenheitValue ) && (celsiusValue === null || celsiusValue === "")){
        //Only fahrenheitValue has a valid number
        resultOutput.value = ((fahrenheitValue - 32)/1.8) + ' Celsius';  
    }else if(!isNan(celsiusValue) && !isNan(fahrenheitValue )){
       //Both contain a valid number
       //Figure this one out as you didn't account for it
    }else{
       //Neither is a valid number
       errorMessage('Please add a number in one of these fields');
    } 
}

Документация isNaN(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN