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

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

---

在这种情况下，当调用

document.getElementById（）

时，您可以利用一个简单的

进行循环和字符串连接。我建议创建一个函数来计算加班费，并让函数将周数作为参数，以便在添加更多字段时可以轻松更改

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

函数getOvertimePaid（numberOfWeeks）{
var合计=0；
//从1迭代到周数，并按
//字段中当前索引的已解析值
for（var i=1；iYou可以在for循环中获得值，也可以在其中进行合计。在for之后，只需除以6，再乘以52，然后将该值添加到“w_annual_ot”我想这应该会对你有所帮助：你想把它缩短吗？非常感谢-到目前为止，我已经能够让第一个解决方案完美地工作，这比我以前的解决方案容易得多。不过，我在使用这些类时运气不太好。
<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" />

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