JavaScript onblur事件处理

Question

我目前正在学习JavaScript,并且在操作事件方面遇到了麻烦.我想添加一个事件,它将text在HTML的某些字段中注册输入,操作它们,并在alert框中显示结果.

这是HTML代码:

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

这是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);
    }

现在,如果我所说的apples(),oranges()以及bananas()在totalPrice()功能它的工作原理没有问题,但是从通话input标签似乎并没有工作.

谢谢!

Answer 1

您必须以与功能不同的方式命名输入

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