update price according to quantity

Question

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/[email protected]/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>