【发布时间】：2021-12-01 18:16:57
【问题描述】：
目标是人们应该在输入字段中输入一个值，而 JavaScript 应该乘以一个固定值。
代码应该对每一行都执行此操作，并且无需刷新即可自动执行此操作。
JavaScript 适用于第一行，但如果我添加循环（前 3 行代码），它就不再起作用了。
表格是这样的
<table class="u-table-entity" id="table_gebäck">
<script src="calculation.js"></script>
<colgroup>
<col width="20%">
<col width="2.1%">
<col width="22%">
<col width="21.7%">
<col width="34.2%">
</colgroup>
<tbody class="u-table-alt-grey-5 u-table-body">
<tr style="height: 55px;">
<b>
<td class="u-table-cell u-table-cell-1"><b>Produkt</b><span style="font-weight: 700;"></span>
</td>
<td class="u-table-cell"></td>
<td class="u-table-cell u-table-cell-3"><b>Einzelpreis</b></td>
<td class="u-table-cell u-table-cell-4"><b>Menge</b></td>
<td class="u-table-cell u-table-cell-5"><b>Gesamtpreis</b></td>
</b>
</tr>
<tr style="height: 55px;">
<td class="u-table-cell">Kornspitz</td>
<td class="u-table-cell"></td>
<td class="u-table-cell">
<p value="1.39" id="basePrice">1,39 €</p>
</td>
<td class="u-table-cell">
<form id="Menge">
<input type="number" min="0" id="quantity" value="0" step="1.0">
</form>
</td>
<td class="u-table-cell">
<form id="sum">
<p><output id="field_sum" for="quantity">0</output> €</p>
</form>
</td>
</tr>
<tr style="height: 55px;">
<td class="u-table-cell">Row 2</td>
<td class="u-table-cell"></td>
<td class="u-table-cell">
<p value="5.39" id="basePrice">5,39 €</p>
</td>
<td class="u-table-cell">
<form id="Menge">
<input type="number" min="0" id="quantity" value="0" step="1.0">
</form>
</td>
<td class="u-table-cell">
<form id="sum">
<p><output id="field_sum" for="quantity">0</output> €</p>
</form>
</td>
</tr>
</tbody>
</table>
以及到目前为止我创建的 JavaScript 代码
var table = document.getElementById("table_gebäck");
for (var i = 0, row; row = table.rows[i]; i++) {
let row = table.rows[i]
(function () {
const basePrice = document.getElementsByClassName("basePrice");
const quantityInput = document.getElementsByClassName("quantity");
const resOutput = document.getElementsByClassName("field_sum");
quantityInput.addEventListener("change", function () {
let currentQuantity = parseFloat(quantityInput.value);
let currentBasePrice = parseFloat(basePrice.getAttribute("value"));
resOutput.textContent = currentQuantity * currentBasePrice;
});
}());
}
编辑
这也帮助了我
Calculating total price by iterating in the table using JavaScript
【问题讨论】：
-
ID 必须在 HTML 文档中是唯一的。
-
好的，所以我必须称它为 id= baseprice1，id= baseprice 2 等等？
-
不仅 ID 重复，其他 ID 也重复，例如
Menge、quantities和sum。而不是现在“编号”所有这些，您可能应该研究其他选择元素的方法 - f.e.基于类，和/或与 DOM 中其他元素的关系。 -
<p value="1.39"- 段落没有值属性；如果您需要将类似这样的附加信息放在或多或少的通用元素上，则应该使用 自定义数据属性。 -
getElementsByClassName或querySelector等方法不仅可以在文档上调用，还可以在特定元素上调用 - 在这种情况下，它们只会选择后代元素。
标签： javascript dom data-binding event-handling dom-events