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的元素，则需要具有CertainPerformance在评论中提到的id属性的元素。

如果希望按元素名称获取元素，则可以使用

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

要设置input的显示值，您需要设置value中的input，而不是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>

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

1 个答案: