I have 2 <p> tags and an input field, wrapped in a while loop
<p id="price"></p>
<input id="quantity" oninput="calculate(<?php echo $cprice; ?>)" type="text" name="quantity">
<p id="total"></p>
I want to use JavaScript to perform arithmetic.
I want to multiply price and quantity and display the result in total. Without the while loop, it works but with the while loop, it only updates the first field.
function calculate(price) {
var quantity = document.getElementById('quantity').value;
var result = document.getElementById('total');
var myResult = price * quantity;
document.getElementById('total').innerHTML = myResult;
}
I don't know how to dynamically update the total tag with js
You need to change your IDs to class since IDs must be unique.
See example which is assuming price is alway there
I choose to not use nextElement since you can easily add other stuff to the html without it
I also made the code unobtrusive instead of having inline handlers
document.querySelectorAll(".quantity").forEach(function() {
this.oninput = function() {
var q = document.querySelectorAll(".quantity"),
p = document.querySelectorAll(".price"),
total = 0;
q.forEach(function(qt, index) {
var price = +p[index].innerText,
quantity = +qt.value;
if (!isNaN(quantity)) total += price * quantity;
})
document.getElementById('total').innerHTML = total;
}
})<p class="price">1</p>
<input class="quantity" type="text" name="quantity">
<p class="price">2</p>
<input class="quantity" type="text" name="quantity">
<p class="price">3</p>
<input class="quantity" type="text" name="quantity"><br/>
Total:<p id="total"></p></div>
IDs need to be unique. If there are duplicates, document.getElementById will return the first one.
Instead of using IDs, use DOM navigation methods. You can pass in this to get a reference to the input element, then find the output element after it.
function calculate(price, input) {
var quantity = input.value;
var result = input.nextElementSibling;
var myResult = price * quantity;
result.innerHTML = myResult;
}<p class="price">Price = 30</p>
<input class="quantity" oninput="calculate(30, this)" type="text" name="quantity">
<p class="total"></p>
<p class="price">Price = 45</p>
<input class="quantity" oninput="calculate(45, this)" type="text" name="quantity">
<p class="total"></p></div>