JavaScript onblur event handling

Issue

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.

Solution

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>

Answered By - Vladu Ionut