Question

我正在使用typeof命令来确保此温度（摄氏/华氏度）计算器的2个输入字段中只有1个填充了数据，并且必须为数字。如果输入的数字无效或两个字段都被填充，则应用程序将引发错误消息。

问题：没有任何条件可以满足-即使我输入了有效的数字，也会始终显示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

您可以使用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

Answer 2

执行const celsiusInput = document.getElementById('celsius')时得到的是DOM Element，而不是值。为了获得价值，您必须检查属性value。

所以您最终会得到这样的东西：

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

现在，如果我们执行typeof celsiusValue，我们将始终得到string，因为文本/数字输入总是接受文本（有关更多信息，请检查输入的type属性）。

检查数字或字母是否正确的方法是使用Regular Expressions。

我将留下一个简单的示例作为您的起点：

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 3

首先，通过像fahrenheitInput === null这样的比较，您正在将DOM元素与null值进行比较。

只有在DOM元素不存在的情况下，结果才为true。

第二，typeof方法将始终对DOM元素类型求值为 String ，因此再次将其始终为false。

要真正获得想要的东西，必须进行适当的检查

要检查是否同时提供了两个输入字段，只需检查值的长度即可：

if（fahrenheitInput.length> 0 && celsiusInput.length> 0）//失败
如果仅给出fahrenheitInput：

if（！isNaN（Number（fahrenheitInput））//转换
如果仅给出celsiusInput：

if（！isNaN（Number（celsiusInput））//转换
最后，如果以上所有检查都没有检查我们，那就失败

我希望这是可以解释的。

检查JS中的输入类型

3 个答案: