我目前正在学习 JavaScript,但在处理事件时遇到了问题。我想添加一个事件,它将在 HTML 中的某些 text
字段中注册输入,操作它们,并在 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);
}
现在,如果我在 totalPrice() 中调用
函数没问题,但是 apples()
、oranges()
和 bananas()
input
标签的调用似乎不起作用。
最佳答案
您必须以不同于函数的方式命名输入
// 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>
关于JavaScript onblur 事件处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35343703/