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

Question

我对 javascript 还是很陌生，想知道是否有更有效的方法来处理这种情况，例如使用数组？

我有一个包含 6 个字段的 HTML 表单，可让您输入过去六周支付的加班费。然后我使用 javascript 将六个值相加，除以 6 并乘以 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));