从多个表单输入以打印答案（Javascript）

Question

因此，我一直致力于一个小型初学者javascript项目，该项目采用员工数据并计算并打印出总计运行清晰的按钮。无论出于何种原因，我无法使计算函数运行。

这是我的计算功能和我的形式：

function calcPay(payHr, regHr, otHr) { 
 
    var basePay = (payHr.value * regHr.value); 
 
    var otPay = (otHr.value * (payHr.value * 1.5)); 
 
    var total = (basePay + otPay); 
 
    total.value = total + total; 
 
}

<form name="Payroll"> 
 
    <p>Employee1 ID: 
 
    <input type="text" id="eid1" name="eid1">Pay per hour: 
 
    <input type="text" id="pph1" name="pph1">Hours worked: 
 
    <input type="text" id=" rhw1" name="rhw1">Overtime worked: 
 
    <input type="text" id="otw1" name="otw1"></p> 
 

 
    <p>Employee2 ID: 
 
    <input type="text" id="eid2" name="eid2">Pay per hour: 
 
    <input type="text" id="pph2" name="pph2">Hours worked: 
 
    <input type="text" id="rhw2" name="rhw2">Overtime worked: 
 
    <input type="text" id="otw2" name="otw2"></p> 
 

 
    <p>Employee3 ID: 
 
    <input type="text" id="eid3" name="eid3">Pay per hour: 
 
    <input type="text" id="pph3" name="pph3">Hours worked: 
 
    <input type="text" id="rhw3" name="rhw3">Overtime worked: 
 
    <input type="text" id="otw3" name="otw3"></p> 
 

 
    <input type="button" name="toClick" onclick="JavaScript: calcPay(pph1, rhw1, otw1);calcPay(pph2, rhw2, otw2); calcPay(pph3, rhw3, otw3);" value="Calculate"> 
 

 
    <input type="button" name="toClick" onclick="JavaScript: clearField();" value="Clear All"> 
 
    <br> 
 
    <br> 
 
    <p>Total payout this week: 
 
    <input type="text" id="total" value="total"> 
 

 
</form>

谢谢！ ：d

Answer 1

在你的最后一行，你从来没有真正定义total作为输出框：

var total = (basePay + otPay); 
total.value = total + total; 

尝试直接使用getElementById：

function calcPay(payHr, regHr, otHr){ 
    var basePay = (payHr.value * regHr.value); 
    var otPay = (otHr.value * (payHr.value * 1.5)); 
    var total = (basePay + otPay); 
    document.getElementById('total').value = total + total; 
} 

或者通过将其分配给一个变量：

function calcPay(payHr, regHr, otHr){ 
    var basePay = (payHr.value * regHr.value); 
    var otPay = (otHr.value * (payHr.value * 1.5)); 
    var total = (basePay + otPay); 
    var payOutput = document.getElementById('total'); 
    payOutput.value = total + total; 
} 

在附注中，您确定要添加tot在那里结束自己的价值？ total + total将使输出数字增加一倍。

Answer 2

对此有很多不正确的。

首先，让我们消除和Employee2和Employee3和集中刚Employee1，我已经重新格式化了一下：

<p> 
Employee1 ID: <input type="text" id="eid1" name="eid1"> <br> 
Pay per hour: <input type="text" id="pph1" name="pph1"> <br> 
Hours worked: <input type="text" id=" rhw1" name="rhw1"> <br> 
Overtime worked: <input type="text" id="otw1" name="otw1"> <br> 
</p> 

现在，你（精简）计算按钮看起来是这样的（注意我说的“ ID”也）：

<input type="button" name="toClick" id="calc" 
     onclick="JavaScript: calcPay(pph1, rhw1, otw1);" value="Calculate"> 

您对calcPay呼叫尝试使用PPH1，rhw1和otw1，使用领域的ID或名称。但是这实际上并没有获得实地价值。为了让字段的内容，你需要得到那么DOM对象获取其值

var pph = document.getElementById('pph1'); 
var rate_ph = pph.value * 1; // multiply to get 'typeof rate_ph' to be "number" 

你必须做类似让rhw1和otw1的价值的东西。这很难做到像这样的内联onclick处理程序。你会想要一个更简单的处理程序，其中然后取得每个适当的值后调用calcPay（...）。最后，您需要在某处设置计算的值;再次，你不能仅仅通过名字来引用它。

也许像这样（未经测试）的例子。你必须剥离内联处理程序才能使用addEventListener。

<input type="button" name="toClick" id="calc" value="Calculate"> 

function calcPay(payHr, regHr, otHr) { 
    var basePay = (payHr.value * regHr.value); 
    var otPay = (otHr.value * (payHr.value * 1.5)); 
    var total = (basePay + otPay); 
    return total; 
} 

function runCalculation(evt) { 
    var total = 0; 

    var pph = document.getElementById('pph1'); 
    var rate_ph = pph.value * 1; 
    // or, combined: 
    // var rate_ph = document.getElementById('pph1').value * 1; 

    var rhw = document.getElementById('rhw1'); 
    var reg_hours = rhw.value * 1; 

    var otw = document.getElementById('otw1'); 
    var ot_hours = otw.value * 1; 

    total += calcPay(rate_ph, reg_hours, ot_hours); 
    document.getElementById('total').value = total; 
} 

var calcbtn = document.getElementById('calc'); // this is why I added the id 
calcbtn.addEventListener('click', runCalculation); 

展开了这一点，通过PPH2，rhw2等获取的值来使用所有三个员工，并且对每个total += calcPay(...)，最后设置在该领域的总。

有更酷的方法来对重复结构进行多重计算，但超出“初学者”级别。