javascript - 通过 javascript 访问 HTML 输入数组字段

Question

以下 HTML 代码引用 javascript，根据计算值更新同一行中的另一个输入字段。我似乎无法引用 HTML 字段，因为它返回时未定义。问题是 HTML 输入数组值为 NAME[EmployeeID]，因此我将 EmployeeID 传递给函数以便引用正确的 HTML 字段。只是似乎无法弄清楚如何格式化innerHTML命令。

<script language="javascript"><!--
function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {
  if (AdvanceAmt > 0) {
    var ePay    = eWorked * eRate;

    if (ePay < AdvanceAmt) {
      document.getElementById(Amt2Adv[eID]).innerHTML = AdvanceAmt.toFixed(2);
    } else {
      document.getElementById(Amt2Adv[eID]).innerHTML = ePay.toFixed(2);
    }
  }
}
//--></script>

HTML 代码

              <tr>
                <td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
                  <tr>
                    <td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
                  </tr>
                  <tr>
                    <td align="center"><b>Select</b></td>
                    <td align="center"><b>Employee</b></td>
                    <td align="center"><b>Type</b></td>
                    <td align="center"><b>Period</b></td>
                    <td align="center"><b>Amount</b></td>
                    <td align="center"><b>Worked</b></td>
                    <td align="center"><b>Amt->Adv</b></td>
                    <td align="center"><b>Advance</b></td>
                    <td align="center"><b>GiftCard</b></td>
                  </tr>
                  <tr>
                    <td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
                    <td align="center">Joe Fabitz</td>
                    <td align="center">Cash</td>
                    <td align="center">Hourly</td>
                    <td align="center">$10.00</td>
                    <td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
                    <td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
                    <td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
                    <td align="center">0</td>
                  </tr>
                  <tr>
                    <td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
                    <td align="center">Jane Fabitz</td>
                    <td align="center">Cash</td>
                    <td align="center">Hourly</td>
                    <td align="center">$10.00</td>
                    <td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
                    <td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
                    <td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
                    <td align="center">0</td>
                  </tr>
                  <tr>
                    <td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button>&nbsp;&nbsp;<a href="https://somewhere.com/something.php?date=2018-11-09"><button type="button" name="" class="css3button">Cancel</button></a></td>
                  </tr>
                </table></form></td>
              </tr>

Answer 1

如果您想使用 getElementById 选择元素，则需要一个具有 id 属性的元素，如 CertainPerformance 中所述。在评论中。

如果您想通过名称获取元素，可以使用

• document.querySelector 返回与提供的 query 匹配的第一个元素，或
• document.getElementsByName 返回具有提供的 name 的所有元素

要设置输入的显示值，您需要设置输入的值，而不是innerHTML.

此外，String没有toFixed方法，您需要先将AdvanceAmt解析为Number。

function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {  
  AdvanceAmt = parseFloat(AdvanceAmt);
  
  if (AdvanceAmt > 0) {
    var ePay = eWorked * eRate;
    var selector = `input[name="amt2adv\[${eID}\]"]`;

    if (ePay < AdvanceAmt) {
      document.querySelector(selector).value = AdvanceAmt.toFixed(2);
    } else {
      document.querySelector(selector).value = ePay.toFixed(2);
    }
  }
}

<table>
  <tr>
    <td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tr>
        <td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
      </tr>
      <tr>
        <td align="center"><b>Select</b></td>
        <td align="center"><b>Employee</b></td>
        <td align="center"><b>Type</b></td>
        <td align="center"><b>Period</b></td>
        <td align="center"><b>Amount</b></td>
        <td align="center"><b>Worked</b></td>
        <td align="center"><b>Amt->Adv</b></td>
        <td align="center"><b>Advance</b></td>
        <td align="center"><b>GiftCard</b></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
        <td align="center">Joe Fabitz</td>
        <td align="center">Cash</td>
        <td align="center">Hourly</td>
        <td align="center">$10.00</td>
        <td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
        <td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
        <td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
        <td align="center">0</td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
        <td align="center">Jane Fabitz</td>
        <td align="center">Cash</td>
        <td align="center">Hourly</td>
        <td align="center">$10.00</td>
        <td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
        <td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
        <td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
        <td align="center">0</td>
      </tr>
      <tr>
        <td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button>&nbsp;&nbsp;<a href="https://somewhere.com/something.php?date=2018-11-09"><button type="button" name="" class="css3button">Cancel</button></a></td>
      </tr>
    </table></form></td>
  </tr>
</table>