Calculate input value with a fixed value-CodePudding

I want that people can order something so they can write in the amount they want and I will be calculated automatically
like 1 pullover costs 10$
she wants 3 so total cost 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);
     }

this is the code i tried to write but i don't know how to combine the js script with html

CodePudding user response：

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

CodePudding user response：

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