How to make sure that it redirects to certain url only when button is clicked javascript – Html

So I somehow built that It transfer total from checkout page to index page which is in this case payment page,But the is one problem;it automaticly goes to index page when going on checkout page but I want that it does that only when button is clicked.I tried to do something with addEventListener but it just goes on index.html? instead of something like index.html?total=320.00

heres checkout code:

  <div class="total">
    <form action="index.html" class="total">
    <h3 style="text-align:center; display: none;">Subtotal: <br><span id="subtotal"></span></h3>
    <h3 style="text-align:center;">Total: <br><span id="total">$0</span></h3>
    <a><button type="submit" class="buy-btn" style="background-color: rgb(29, 4, 216);">Continue to purchase</button></a>
    <a href="index.html" onclick="alert('You will be redirected to the home page')"><button style="background-color: rgb(216, 4, 4);">Cancel</button></a>
  </div>
</form>
  <!--It does clear but wonder , make that you cant click on button if that function is done-->
</body>
<script>
  const cartItemsDiv = document.querySelector(".cart-items");
  const storedCartItem = localStorage.getItem("selectedItems");  
  let subtotal = 0;

  const continueButton = document.getElementById("buy-btn");
  const clearButton = document.getElementById("clear-button");

function clearCartItems() {
  // Clear the HTML content of the cart-items div
  const cartItemsDiv = document.querySelector(".cart-items");
  cartItemsDiv.innerHTML = "";

  // Set the subtotal and total to $0
  const subtotalSpan = document.getElementById("subtotal");
  const totalSpan = document.getElementById("total");
  subtotalSpan.innerHTML = "";
  totalSpan.innerHTML = "$0";

  // Remove the selected items from localStorage
  localStorage.removeItem("selectedItems");

  alert("Added items will be cleared.");
  // Change the URL to the index page and prevent going to the checkout page
  window.location.href = "sproduct6.html";
  history.replaceState(null, "", window.location.href);

  // Update the UI
  document.getElementById("added-products").innerHTML = "You have no items in your cart!";
  document.getElementById("buy-btn").style.display = "none";
  document.getElementById("clear-button").style.display = "none";

   if (cartItemCount == 0) {
    setTimeout(function() {
      alert("You have no items in your cart. Let's get back to product page.");
      window.location.href = ('sproduct6.html');
    }, 50); // 3 second delay 
    document.getElementById("added-products").innerHTML = "You have no items in your cart!";
    continueButton.style.display = "none";
    clearButton.style.display = "none";
    // Save the visibility state of the buttons
    localStorage.setItem("buttonsVisible", "false");
  } else {
    document.getElementById("added-products").innerHTML = "YOU ADDED THIS PRODUCTS";
  } 
}

if (storedCartItem) {
  const cartItem = JSON.parse(storedCartItem); // Parse the storedCartItem string into an array

  for (let i = 0; i < cartItem.length; i++) {
    const cartItemElement = document.createElement("div");  

    
    cartItemElement.innerHTML = `
        <hr />
        <h3>${cartItem[i].title}</h3>  
        <p>Price: ${cartItem[i].price}</p>
        <p>License: ${cartItem[i].license}</p>
        <img src="${cartItem[i].image}" width='30%'/><br>
        <audio controls style="width:50%;">
          <source src="${cartItem[i].audio}" type="audio/mp3"> 
        </audio>
        `;
    // ADD DELETE OPTION 

    cartItemsDiv.appendChild(cartItemElement);

    const price = Number(cartItem[i].price.replace("$", "")); // Parse price as a number and remove dollar sign
    subtotal += price;
    // MAKE REPLACE TITLE TO YOU HAVE NO ITEMS IN YOUR CART
  }

  const subtotalElement = document.querySelector("#subtotal");
  subtotalElement.textContent = `$${subtotal.toFixed(2)}`;

  const totalElement = document.querySelector("#total");
  const total = subtotal;
  totalElement.textContent = `$${total.toFixed(2)}`;

  // Add this line to redirect to index.html and pass the total as a query parameter
  window.location.href = 'index.html?total=' + total.toFixed(2);

  totalElement.textContent = `$${total.toFixed(2)}`;
  const totalPriceInput = document.querySelector("#total");
  totalPriceInput.value = total.toFixed(2);

  passtotal(); // Call the function to pass the total price to the index page

function passtotal(){
  var total = document.getElementById('total').value;
  var subtotal = document.getElementById('subtotal').value;
  localStorage.getItem("total", total);
  return false;
}
}
</script>

and heres index code

    <div class="sr-root">
      <span id="total"></span>
      <div class="sr-main">
        <h1>Pay with a bunch of payment option</h1>

        <form id="payment-form" method="POST">
          <input type="text" name="email" id="email" placeholder="E-Mail" required>
          <input type="text" name="name" id="name" placeholder="Full Name" required>
    
          <div id="payment-element"></div>
    
          <button>Pay</button><!--Make functional-->
          <!--Make total price hidden and that total of this is same as in checkout and that its connected to ruby-->
          <div id="error-messages"></div>
        </form>        
      </div>
    </div>
    <script>
      // get the value of the "total" parameter from the URL
      const urlParams = new URLSearchParams(window.location.search);
      const total = urlParams.get("total");

      // set the text content of the span element to the total value
      const totalSpan = document.getElementById("total");
      totalSpan.textContent = total;
    </script>