Javascript :: Trouble with clearing other text boxes when value is backspaced
<p>I am a beginner at Javascript, this is my first Javascript that isn't just 'cut/paste/hack'. I created an calculator that updates the output as input is typed, I can get all my 'answerboxes' to clear when the input box is blurred then focused, but if I backspace the value out of the input box the 'answerboxes' still show the 'answers' based on the last char. value that was backspaced.</p>

<p>In my 'validiateTheInput' funct. I can declare an 'if = "3"' to clear them and it works when a '3' is the value (which would not work in the end :) ), but I can't seem to catch it if the field appears blank do to user backspacing the value from the box.</p>

<p>Am I obsessing over something stupid, or am I just missing something?</p>

<p>Heres the whole thing (with some basic HTML ommitted):
There is also a bit of overkill in the validation function because I was experimenting with trying to catch the 'blank input' do to backspacing.</p>

<pre><code>//jQuery keyup to grab input
$(document).ready(function() {
    $('#totalFeet').keyup(function() {
        validiateTheInput();
    });
});

//clear calculated values    


function clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField) {
    answerbox.value = "";
    answerbox1.value = "";
    answerbox2.value = "";
    totalFeetField.value = "";
};

//validate input, then go to callAll (calc the output and display it)


function validiateTheInput() {
    var totalFeetField = document.getElementById('totalFeet');
    var answerbox = document.getElementById('answerbox').value;
    var answerbox1 = document.getElementById('answerbox1').value;
    var answerbox2 = document.getElementById('answerbox2').value;

    // feel like I should be able to catch it here with the length prop.
    if (totalFeetField.value.length == 0) {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }

    // if input is usable, do the good stuff...
    if (totalFeetField.value != "" &amp;&amp; !isNaN(totalFeetField.value)) {
        callAll(); // call the function that calcs the boxes, etc.
    }

    // if input is NaN then alert and clear boxes (clears because a convenient blur event happens)
    else if (isNaN(totalFeetField.value)) {
        alert("The Total Sq. Footage Value must be a number!")
        document.getElementById('totalFeet').value = "";
    }

    // clears the input box (I wish) if you backspace the val. to nothing
    else if (totalFeetField.value == '3') {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }
    // extra effort trying to catch that empty box :(   
    else if (typeof totalFeetField.value == 'undefined' || totalFeetField.value === null || totalFeetField.value === '') clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
}


//group all box calc functions for easy inline call


function callAll() {
    calcFirstBox();
    calcSecondBox();
    calcThirdBox();
}

// calculate box fields based on input box


function calcFirstBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 5.95; // set multiplier
    document.getElementById('answerbox').value = answer.toFixed(2);
}

// calc the second box


function calcSecondBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 18.95; // set multiplier
    document.getElementById('answerbox1').value = answer.toFixed(2);
}

// calc the third box


function calcThirdBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 25.95; // set multiplier
    document.getElementById('answerbox2').value = answer.toFixed(2);
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="calculator"&gt;

        &lt;form name="calculate"&gt;
            &lt;label for="total"&gt;Total Value to Calculate:&lt;/label&gt; &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp 
            &lt;input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes(totalFeet, answerbox, answerbox1, answerbox2);"&gt;&lt;br /&gt;&lt;br /&gt;


            &lt;label for="answerbox"&gt;Total Value X &amp;nbsp;$5.95:&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp$&lt;/label&gt;
            &lt;input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15"&gt;&lt;br /&gt;&lt;br /&gt;

            &lt;label for="answerbox1"&gt;Total Value X $18.95:&amp;nbsp&amp;nbsp&amp;nbsp$&lt;/label&gt;
            &lt;input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15"&gt;&lt;br /&gt;&lt;br /&gt;

            &lt;label for="answerbox2"&gt;Total Value X $25.95:&amp;nbsp&amp;nbsp&amp;nbsp$&lt;/label&gt;
            &lt;input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15"&gt;
        &lt;/form&gt;

&lt;/div&gt;
</code></pre>
