JavaScript simple "erreur-manipulation" en remplaçant NaN avec conditionnel

Je me demandais comment je peux détecter le type de fausse entrée et au lieu de présenter l'utilisateur avec NaN, avoir une information logique être affiché.JavaScript simple "erreur-manipulation" en remplaçant NaN avec conditionnel

Voici mon code:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Quadratic Root Finder</title> 

<script> 
window.onload = function() { 
    document.getElementById('calculate').onclick = function calculateQuad() 
    { 
     var inputa = document.getElementById('variablea').value; 
     var inputb = document.getElementById('variableb').value; 
     var inputc = document.getElementById('variablec').value; 

     root = Math.pow(inputb,2) - 4 * inputa * inputc; 
     root1 = (-inputb + Math.sqrt(root))/2*inputa 
     root2 = (-inputb + Math.sqrt(root))/2*inputa 

     document.getElementById('root1').value = root1; 
     document.getElementById('root2').value = root2; 
     if(root<'0') 
     { 
      document.getElementById('root1').value = 'No real solution' 
      document.getElementById('root2').value = 'No real solution' 
     } 
     else { 
      if(root=='0') 
      { 
       document.getElementById('root1').value = root1 
       document.getElementById('root2').value = 'No Second Answer' 
      } 
      else { 
       document.getElementById('root1').value = root1 
       document.getElementById('root2').value = root1 
       } 
      } 
    }; 
    document.getElementById('erase').onclick = function() 
    { 
     document.getElementById('form1').reset(); 
    } 
} 
</script> 

<style> 
#container 
{ 
    text-align: center; 
} 
</style> 

</head> 

<body> 
<div id="container"> 
<h1>Quadratic Root Finder!</h1> 
<form id="form1"> 
    a:<input id="variablea" value="" type="text"> 
    <br/> 
    b:<input id="variableb" value="" type="text"> 
    <br /> 
    c:<input id="variablec" value="" type="text"> 
    <br /> 
    <input id="calculate" value="Calculate!" type="button"> 
    <input id="erase" value="Clear" type="button"> 
    <br /> 
    <br /> 
    Roots: 
    <br /> 
    <input id="root1" type="text" readonly> 
    <br /> 
    <input id="root2" type="text" readonly> 
</form> 
</div> 
</body> 
</html>

Alors, disons par exemple, vous tapez 10a dans le champ d'entrée b mais a = 1 et c = 0 je voudrais être en mesure de détecter les erreurs de saisie et d'impression « S'il vous plaît seulement des entiers d'entrée "ou quelque chose dans ce sens.

Source

2010-10-12 Qcom

Il est assez simple, voici un échantillon complet, sortie beaux messages d'erreur;)

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Quadratic Root Finder</title> 

<script> 
function getnum(id) 
{ // get 'n' check number 
    var input = +(document.getElementById(id).value); 
    if (isNaN(input)) 
    { 
     document.getElementById('errmsg').innerHTML = 'Value of <em>' + id +'</em> is non-numeric, please enter a number.'; 
     return false; 
    } 
    return input; 
} 

window.onload = function() { 
    document.getElementById('calculate').onclick = function calculateQuad() 
    { 
     var inputa = getnum('variable a'); 
     var inputb = getnum('variable b'); 
     var inputc = getnum('variable c'); 

     if (inputa === false) 
      return; 
     if (inputb === false) 
      return; 
     if (inputb === false) 
      return; 

     root = Math.pow(inputb,2) - 4 * inputa * inputc; 
     root1 = (-inputb + Math.sqrt(root))/2*inputa; 
     root2 = (-inputb + Math.sqrt(root))/2*inputa; 

     document.getElementById('root1').value = root1; 
     document.getElementById('root2').value = root2; 
     if(root < 0) 
     { 
      document.getElementById('root1').value = 'No real solution'; 
      document.getElementById('root2').value = 'No real solution'; 
     } 
     else { 
      if(root==0) 
      { 
       document.getElementById('root1').value = root1; 
       document.getElementById('root2').value = 'No Second Answer'; 
      } 
      else { 
       document.getElementById('root1').value = root1; 
       document.getElementById('root2').value = root1; 
       } 
      } 
    }; 
    document.getElementById('erase').onclick = function() 
    { 
     document.getElementById('form1').reset(); 
    } 
} 
</script> 

<style> 
#container 
{ 
    text-align: center; 
} 
#errmsg 
{ 
    color: #c00; 
} 
</style> 

</head> 

<body> 
<div id="container"> 
<h1>Quadratic Root Finder!</h1> 
<form id="form1"> 
    <span id="errmsg"></span><br/> 
    a:<input id="variable a" value="" type="text"> 
    <br/> 
    b:<input id="variable b" value="" type="text"> 
    <br /> 
    c:<input id="variable c" value="" type="text"> 
    <br /> 
    <input id="calculate" value="Calculate!" type="button"> 
    <input id="erase" value="Clear" type="button"> 
    <br /> 
    <br /> 
    Roots: 
    <br /> 
    <input id="root1" type="text" readonly> 
    <br /> 
    <input id="root2" type="text" readonly> 
</form> 
</div> 
</body> 
</html>

Source

2010-10-12 04:32:49 Frank

Vous pouvez vérifier l'entrée avant d'essayer de l'utiliser dans un calcul.

document.getElementById('calculate').onclick = function calculateQuad() { 
    var inputa = document.getElementById('variablea').value; 
    var inputb = document.getElementById('variableb').value; 
    var inputc = document.getElementById('variablec').value; 

    inputa = new Number(inputa); // try to convert to number 
    if (isNaN(inputa)) { // use built in method to check for NaN 
     alert('variable a is not a valid integer or whatever.'); 
     return; 
    } 

    // TODO repeat for b and c 

    root = Math.pow(inputb, 2) - 4 * inputa * inputc; 
    root1 = (-inputb + Math.sqrt(root))/2 * inputa; // don't forget your semicolons. 
    root2 = (-inputb + Math.sqrt(root))/2 * inputa; 

    document.getElementById('root1').value = root1; 
    document.getElementById('root2').value = root2; 

    // should be comparing against integer 0, not string 0 
    if (root < 0) { 
     document.getElementById('root1').value = 'No real solution' 
     document.getElementById('root2').value = 'No real solution' 
    } 
    else { 
     if (root === 0) { 
      document.getElementById('root1').value = root1 
      document.getElementById('root2').value = 'No Second Answer' 
     } 
     else { 
      document.getElementById('root1').value = root1 
      document.getElementById('root2').value = root1 
     } 
    } 
};

Source

2010-10-12 04:38:16 lincolnk

Unary '+' peut être utilisé pour convertir un nombre, ressemble moins à un alien;) – Frank

Do ** not ** jamais utiliser une alerte, du point de vue de l'utilisabilité. Les alertes perturbent le flux de travail d'un utilisateur et lui donnent l'impression d'avoir fait quelque chose de terrible - juste un bon conseil. – Frank

Je pense que vous avez besoin de quelque chose comme ça

function NaNValueReplacement() { 
for (var i = 0; i < arguments.length; i++) { 
    //alert(arguments[i]); 
     var x = (arguments[i]); 
     var y = document.getElementById(x).value; 
     var y_txtField = document.getElementById(x); 
    /* 
    alert('Argument '+i+' with name "'+x+'" ::: Value of element '+i+' is "'+y+'" and the variable type is "'+y_txtField+'"'); 
    */ 
    if (isNaN(y)) 
    { 
     y_txtField.value='Some Other Value'; 

    } 

}}

et l'appeler comme ceci: NaNValueReplacement('txt_field_1','txt_field_2','txt_field_3','txt_field_4');

Vous pouvez placer autant de txt_fields que vous le souhaitez.

J'ai aussi placé un exemple ici http://jsfiddle.net/lidakis/mveWy/6/

Hope it helps.

Source

2013-11-03 20:08:59

JavaScript simple "erreur-manipulation" en remplaçant NaN avec conditionnel

Répondre

Questions connexes