我希望人們可以訂購一些東西，這樣他們就可以寫出他們想要的數量，我將自動計算，
例如 1 件套頭衫成本 10 美元，
她想要 3 件，所以總成本 30 美元：
<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">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>calculate = function() {
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
document.getElementById('total') =
parsInt(quantity)*parsInt(price);
}
這是我嘗試撰寫的代碼，但我不知道如何將 js 腳本與 html 結合起來
uj5u.com熱心網友回復：
Here's a solution :
<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>
<script>
(function() {
const basePrice = document.getElementById("basePrice");
const quantityInput = document.getElementById("quantity");
const resOutput = document.getElementById("field_sum");
quantityInput.addEventListener("change", function() {
let currentQuantity = parseFloat(quantityInput.value);
let currentBasePrice = parseFloat(basePrice.getAttribute("value"));
resOutput.textContent = currentQuantity * currentBasePrice;
});
})()
</script>But here are some warnings about some things that will probably cause you problems in a near future.
Don't save data as a number with a "," inside it. Always use "." instead
If you save some data in the attribute value in a p. That won't be accessible by doing element.value.
If I was you, I'll do something like <p data-value="1.39"></p>. And then use element.dataset.value to get/set it
uj5u.com熱心網友回復：
calculate = function() {
var quantity = document.getElementById('quantity').value;
var price = document.getElementById('price').value;
document.getElementById('total') = parsInt(quantity)*parsInt(price);
}
this is the code i tried to write but i don't know how to combine the js script with html
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/310067.html
標籤：javascript html css