javascript数组中读取表单数据的最佳实践

Question

I'm still quite new to javascript and was wondering if there's a more efficient way to handle this situation, for example by using an array?

I have an HTML form with 6 fields that let you enter the last six weeks amount of overtime paid. I'm then using javascript to add the six values up, divide by six and multiply by 52 to obtain an annual overtime amount. My fields are named w_ot_1, w_ot_2 up to w_ot_6 and I'm using the code below. It all works fine but I'm finding it's really repetitive and it's not just overtime I need to run this calculation on. I'm sure there's got to be a more efficient way. Does anyone have any ideas that could help?

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

This is a situation where you can leverage a simple for loop and string concatenation when calling document.getElementById() . I would suggest creating a function to calculate the overtime paid and have the function take the number of weeks as a parameter so that you can easily change it if you add more fields.

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

Another thing you may want to look at to make the code and the supporting HTML even more flexible is to leverage a class name on your weekly overtime input elements. If you do that and adjust the code slightly you can add or remove fields at will and the function to calculate the annualized overtime will continue to work. As an example:

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