JavaScript onblur事件处理

我目前正在学习JavaScript，在处理事件方面遇到了困难。我想添加一个事件，该事件将在HTML中的一些

文本

字段中注册输入，对它们进行操作，并在

警报

框中显示结果

以下是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>

现在，如果我在

totalPrice（）

函数中调用

apples（）

、

oranges（）

、和

bananas（）

，它工作没有问题，但是来自

输入

标记的调用似乎不起作用

---

谢谢大家!

您必须以不同于函数的方式命名输入

//代码在这里
var合计=0；
函数
{
var a=document.order.apples.value；
总数+=a*0.75；
}
函数oranges_func（）
{
var o=document.order.oranges.value；
总数+=o*0.60；
}
函数(u func)
{
var b=document.order.value；
总数+=b*0.50；
}
函数总价（）
{
//苹果（）；
//橙子（）；
//香蕉（）；
window.alert（“感谢您的订单！\n您的总成本为：“+total”）；
}

苹果

橙子

香蕉

我认为您应该创建一个通用函数，并使用每个水果的name属性：

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

---

答案的问题是，如果你聚焦放置一个值（如2）模糊，然后再次聚焦输入，并通知一个新的输入（如3），它将每次添加它们。对于苹果来说，总共2*0.75+3*0.75。谢谢你们！是的@Sacreyoule总数没有按应有的方式工作，但那只是我的编程不好，我想我可以解决它。你能为这种行为提供解释或参考吗？名称冲突的原因不明显，因为：window.document.myForm.myInput！=名称相同时使用window.myFunc。谢谢。您可以找到@Sacreyoule问题的解决方案。您需要以不同于输入名称的方式命名函数。它是由@VladuIonut回答的，但他删除了答案。他的答案仍然在这里，我想他没有删除它。

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

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