Question

所以我试图将结果值（来自用户输入 Unit_Price_1 * Quantity_1）分配给每行的总文本字段。我让它在我的第一行工作，但不能在我的第二行工作？，有点像菜鸟，试图用我的想法做点什么

HTML 代码：

<table>
<thead>
  <tr>
    <th>Unit Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </tr>
</thead>
<tbody>
   <!---------------- ROW 1 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
    </td>
    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
    </td>
    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="Total_1"
      />
    </td>
  </tr>
   <!---------------- ROW 2 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()"/>
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()"/>
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="Total_1"
      />
    </td>
  </tr>
</tbody>

JavaScript：

  function calculateTotal() {
    
  var Unit_Price_1 = document.getElementById('Unit Price_1').value; 
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1
  
}

Answer 1

id 必须是唯一的。

您的第一个函数只考虑前两个输入。创建一个新函数，对下一行的前两个输入执行相同的操作。

试试这个：

function calculateTotal() {

  var Unit_Price_1 = document.getElementById('Unit Price_1').value;
  var Quantity_1 = document.getElementById('Quantity_1').value;
  var Total_1 = document.getElementById('Total_1')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

}
function calculateTotal2() {

  var Unit_Price_1 = document.getElementById('Unit Price_2').value;
  var Quantity_1 = document.getElementById('Quantity_2').value;
  var Total_1 = document.getElementById('Total_2')
  var Total_Amount_1 = Unit_Price_1 * Quantity_1;
  Total_1.value = Total_Amount_1

}

<table>
  <thead>
    <tr>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <!---------------- ROW 1 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_1" oninput="calculateTotal()" />
    </td>
    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_1" oninput="calculateTotal()" />
    </td>
    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_1" />
    </td>
    </tr>
    <!---------------- ROW 2 ------------------>
    <td>
      <input type="number" name="unit price" placeholder="0.00" id="Unit Price_2" oninput="calculateTotal()" />
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="Quantity_2" oninput="calculateTotal2()" />
    </td>

    <td>
      <input required type="number" name="total" value="0.00" readonly="readonly" id="Total_2" />
    </td>
    </tr>
  </tbody>

如何使用 JavaScript 计算用户第一次和第二次输入并在同一函数中显示不同的结果

1 个答案: