JavaScript onblur event handling

Question

I am currently learning JavaScript and am having trouble with manipulating events. I want to add an event that will register the input in some text fields in HTML, manipulate them, and display a result in an alert box.

Here is the HTML code:

    <form name="order" onSubmit="totalPrice()">
        <p><label><input type="text" name="apples" onblur="apples()"/> Apples</label></p>
        <p><label><input type="text" name="oranges" onblur="oranges()"/> Oranges</label></p>
        <p><label><input type="text" name="bananas" onblur="bananas()"/> Bananas</label></p>
        <p><input type="reset" value="Reset"/>
        <input type="submit" value="Submit Query"/></p>
    </form>

And here is the JavaScript:

    var total = 0;

    function apples ()
    {
        var a = document.order.apples.value;

        total += a * 0.75;
    }

    function oranges ()
    {
        var o = document.order.oranges.value;

        total += o * 0.60;
    }

    function bananas ()
    {
        var b = document.order.bananas.value;

        total += b * 0.50;
    }

    function totalPrice ()
    {
        window.alert("Thank you for your order!\nYour total cost is: " + total);
    }

Now, if I call the apples() , oranges() , and bananas() in the totalPrice() function it works no problem, but the call from the input tags does not seem to work.

Thank you!

Answer 1

You have to name the inputs differently from the functions

 // Code goes here var total = 0; function apples_func () { var a = document.order.apples.value; total += a * 0.75; } function oranges_func () { var o = document.order.oranges.value; total += o * 0.60; } function bananas_func() { var b = document.order.bananas.value; total += b * 0.50; } function totalPrice () { // apples(); //oranges(); //bananas(); window.alert("Thank you for your order!\\nYour total cost is: " + total); } 

  <form name="order" onSubmit="totalPrice()"> <p><label><input type="text" name="apples" onblur="apples_func()"/> Apples</label></p> <p><label><input type="text" name="oranges" onblur="oranges_func()"/> Oranges</label></p> <p><label><input type="text" name="bananas" onblur="bananas_func()"/> Bananas</label></p> <p><input type="reset" value="Reset"/> <input type="submit" value="Submit Query"/></p> </form> 

Answer 2

I think you should make a generic function and use the name attribute of each fruit:

<form name="order" onSubmit="totalPrice()">
    <p><label><input type="text" name="apples" onblur="inputBlur(this)"/> Apples</label></p>
    <p><label><input type="text" name="oranges" onblur="inputBlur(this)"/> Oranges</label></p>
    <p><label><input type="text" name="bananas" onblur="inputBlur(this)"/> Bananas</label></p>
    <p><input type="reset" value="Reset"/>
    <input type="submit" value="Submit Query"/></p>
</form>

And JS looks like:

var fruitNumbers = {apple: 0, orange: 0, banana: 0};
var total = 0;
var prices = {apple: 0.75, orange: 0.6, banana: 0.5}

function inputBlur(fruitInput){
    var fruit = fruitInput.getAttribute('name');
    fruitNumbers[fruit] = this.value;
    calculateTotal();
}

function calculateTotal(){
    total = 0;
    for(fruit in fruitNumbers){
        total += fruitNumbers[fruit] * prices[fruit];
    }
}

function totalPrice ()
{
    window.alert("Thank you for your order!\nYour total cost is: " + total);
}