JavaScript onblur事件處理

我目前在學習JavaScript，並且在操作事件時遇到了麻煩。我想添加一個事件，它將在HTML中的某些text字段中註冊輸入，對它們進行操作，並在alert框中顯示結果。JavaScript onblur事件處理

下面是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()，並在totalPrice()功能bananas()它的工作原理沒有問題，但來自input標籤的呼叫似乎不起作用。

謝謝！

來源

2016-02-11 C. Hennebelle

您需要爲輸入名稱命名不同的函數。它由@VladuIonut回答，但他刪除了答案。 – jcubic

他的答案仍然適用於我。 –

我認爲他沒有取消它。 – jcubic

你必須從功能上

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

來源

2016-02-11 15:44:57

你的答案的問題是，如果你把重點放在一個值（如2）模糊，然後再次集中輸入並通知一個新的（如3），它會每次添加它們。對於蘋果它會這樣做： 2 * 0.75 + 3 * 0.75總數 – Sacreyoule

謝謝你們兩位！是的@Sacreyoule總不按照它應該的方式工作，但這只是我的錯誤編程，我想我可以修復它。 –

你能提供一個對此行爲的解釋或參考嗎？名稱衝突的原因並不明顯，因爲：當名稱相同時，window.document.myForm.myInput！= window.myFunc。謝謝。 – Roberto

我認爲你應該做一個通用的功能，並使用每個水果的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>

和JS看起來像：

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

來源

2016-02-11 16:08:19 Sacreyoule

JavaScript onblur事件處理

回答

相關問題