ansaurus

Question

JavaScript simple "error-handling" by replacing NaN with conditional

Answer 1

+1 A:

It's rather simple, Here is a complete sample, outputting beautiful error messages to ;)

<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>

Frank 2010-10-12 04:32:49

Answer 2

A:

You can check the input before you try to use it in a calculation.

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

lincolnk 2010-10-12 04:38:16

Unary `+` can be used to convert to a number, looks less alien too ;)

Frank 2010-10-12 04:41:52

Do **not** ever use an alert, from a usability standpoint. Alerts disrupts an users workflow pretty hard and gives them the feeling that they did something terrible wrong - just a good tip.

Frank 2010-10-12 04:45:43

ansaurus

tags:

views:

answers:

JavaScript simple "error-handling" by replacing NaN with conditional

related questions