I have a small problem with my buttons for a school project. When I update the quantity by typing it in the form the price updates but when I try to change the quantity by clicking on my buttons it doesn't work.
function increaseValue() {
value = parseInt(document.getElementById("qty").value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById("qty").value = value;
}
function decreaseValue() {
value = parseInt(document.getElementById("qty").value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('qty').value = value;
}
let basePrice = document.getElementById("price").innerHTML;
document.querySelector("#qty").addEventListener("change", function() {
document.querySelector("#changingprice span").innerText = (basePrice * this.value).toFixed(2)
})<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<span id="price">6.99</span>
<div class="num-block skin-5">
<div class="num-block skin-2 pt-2">
<div class="num-in">
<span class="minus dis" id="decrease" onclick="decreaseValue()"></span>
<input type="number" id="qty" min="0" value="0" />
<span class="plus" id="increase" onclick="increaseValue()"></span>
</div>
</div>
</div>
<button id="changingprice" class="rounded buttonshad buttonstyling bg-primary text-light mx-5">Add $<span>0.00</span></button>