1
votes

Vérification du type d'entrée dans JS

J'utilise la commande typeof pour m'assurer que seulement 1 des 2 champs d'entrée de cette calculatrice de température (Celsius vers / depuis Fahrenheit) est rempli de données et il doit s'agir d'un nombre. Si l'entrée n'est pas un nombre valide ou si les deux champs sont renseignés, l'application lancera un message d'erreur.

Le problème: rien ne remplit cette condition - le message d'erreur est toujours affiché, même si je tape un nombre valide.

typeof est-il la bonne solution à ce problème? Si c'est le cas, pourquoi ce code ne fonctionne-t-il pas?

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');
    } 
}

Merci beaucoup!

javascript if-statement forms validation typeof

1 commentaires

Un élément DOM ne serait pas un nombre. Vous pourriez avoir un où l'attribut type serait un nombre, mais le typeof de l'élément ne le serait pas.

3 Réponses :

0
votes

Vous pouvez vérifier les propriétés de valeur de chaque entrée pour voir si ce sont des nombres en utilisant la fonction isNaN () comme ceci:

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');
    } 
}

Documentation de isNaN () : https://developer.mozilla.org/en- US / docs / Web / JavaScript / Reference / Global_Objects / isNaN

1 commentaires

Merci beaucoup! Cela a fait l'affaire. J'ai essayé .value avant mais cela n'a pas fonctionné car typeof n'était pas le bon outil ici. ! isNaN était la clé :) Merci encore!

0
votes

Lorsque vous faites const celsiusInput = document.getElementById ('celsius') , vous obtenez le DOM Element , pas la valeur. Pour obtenir de la valeur, vous devez vérifier la propriété value .

Vous vous retrouveriez donc avec quelque chose comme ceci:

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!")
}

Maintenant, si nous faisons typeof celsiusValue code > nous obtiendrons toujours string , car les entrées de texte / nombre acceptent toujours le texte (vérifiez les entrées type pour plus d'informations).

La bonne façon de vérifier s'il y a des chiffres ou des lettres est d'utiliser Expressions régulières .

Je vais laissez un exemple simple pour vous servir de point de départ:

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

1 commentaires

Merci beaucoup! Eh bien, c'est une toute nouvelle galaxie pour moi. Recherche maintenant pour se familiariser avec regExp ...

0
votes

Tout d'abord, en faisant une comparaison comme celle-ci fahrenheitInput === null , vous comparez un élément DOM à la valeur null.

Cela ne sera évalué à vrai que si l'élément DOM n'a jamais existé .

Deuxièmement, la méthode typeof sera toujours évaluée à une chaîne sur les types d'éléments DOM, donc encore une fois, ce sera toujours faux.

Pour vraiment obtenir ce que vous voulez que vous deviez faire une vérification appropriée

Pour vérifier si les deux champs de saisie sont fournis, il suffit de vérifier la longueur des valeurs:

if(!isNaN(Number(celsiusInput)) //convert

Si seul fahrenheitInput est indiqué:

if(!isNaN(Number(fahrenheitInput)) //convert

si celsiusInput uniquement est indiqué:

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

Enfin, si toutes les vérifications ci-dessus ne vérifient pas notre, échouez

0 commentaires