在表單數據最佳實踐中閱讀的javascript數組

Question

我對javascript仍然很陌生，想知道是否有更高效的方法來處理這種情況，例如使用數組？

我有一個帶6個字段的HTML表單，可以讓您輸入最近六週的加班金額。然後，我使用javascript將六個值相加，除以六再乘以52以獲得一個年度加班金額。我的字段被命名爲w_ot_1，w_ot_2直到w_ot_6，我使用下面的代碼。它一切正常，但我發現它是真正重複的，它不只是加班，我需要運行這個計算。我確信有一個更有效的方法。有沒有人有任何想法可以幫助？

var weekly_ot_1 = parseFloat(document.getElementById("w_ot_1").value.replace(/[^0-9.]/g, '')); 
var weekly_ot_2 = parseFloat(document.getElementById("w_ot_2").value.replace(/[^0-9.]/g, '')); 
var weekly_ot_3 = parseFloat(document.getElementById("w_ot_3").value.replace(/[^0-9.]/g, '')); 
var weekly_ot_4 = parseFloat(document.getElementById("w_ot_4").value.replace(/[^0-9.]/g, '')); 
var weekly_ot_5 = parseFloat(document.getElementById("w_ot_5").value.replace(/[^0-9.]/g, '')); 
var weekly_ot_6 = parseFloat(document.getElementById("w_ot_6").value.replace(/[^0-9.]/g, '')); 
//weekly annualised overtime values 
document.getElementById("w_annual_ot").value= addCommas((((weekly_ot_1 + weekly_ot_2 + weekly_ot_3 + weekly_ot_4 + weekly_ot_5 + weekly_ot_6)/6) * 52).toFixed(2)); 

Answer 1

這是一個情況下，你可以調用document.getElementById()時，利用一個簡單的for環和字符串連接。我建議創建一個函數來計算已支付的加班時間，並將該函數的週數作爲參數，以便您可以在添加更多字段時輕鬆更改它。

function getOvertimePaid(numberOfWeeks) { 
    var total = 0; 

    // Iterate from 1 to the number of weeks and increment the total by 
    // the parsed value in the field for the current index 
    for (var i=1; i<=numberOfWeeks; i++) { 
     total += parseFloat(document.getElementById('w_ot_' + i).value.replace(/[^0-9.]/g, ''); 
    } 

    // Return the annualized amount as a float for flexibility 
    return (total/numberOfWeeks) * 52; 
} 

// Update weekly annualised overtime values and provide formatting at this point 
document.getElementById("w_annual_ot").value= addCommas(getOvertimePaid(6).toFixed(2)); 

另一件您可能想要考慮使代碼和支持HTML更靈活的方法是在每週超時輸入元素上利用類名稱。如果你這樣做並稍微調整代碼，你可以隨意添加或刪除字段，計算年度加班的函數將繼續工作。舉個例子：

HTML

<input type="text" id="w_ot_1" class="weekly-overtime" value="0.00" /> 
<input type="text" id="w_ot_2" class="weekly-overtime" value="0.00" /> 
<input type="text" id="w_ot_3" class="weekly-overtime" value="0.00" /> 

的JavaScript

function getAnnualizedValue(className) { 
    // Get all elements with the given class name 
    var elements = document.getElementsByClassName(className); 

    // Iterate the elements and keep a running total of their values 
    var total = 0; 
    for (var i = 0; i < elements.length; i++) { 
     total += parseFloat((elements[i].value || '0').replace(/[^0-9.]/g, ''); 
    } 

    // Return the annualized amount as a float for flexibility 
    return (total/numberOfWeeks) * 52; 
} 

// Update weekly annualised overtime values and provide formatting at this point 
document.getElementById("w_annual_ot").value= addCommas(getAnnualizedValue('weekly-overtime').toFixed(2));