如何实现仅点击按钮时跳转并传递total参数的JavaScript功能

1. 移除页面加载时的自动跳转代码 #

你当前结账页面的脚本里，计算完total后直接执行了window.location.href = 'index.html?total=' + total.toFixed(2);，这就是一进入页面就跳转的根源，直接删除这行代码。

2. 改造交互逻辑，实现点击跳转并携带参数 #

方案一：通过表单提交传递参数 #

给表单添加隐藏输入框存储total值，利用GET提交自动拼接URL参数：

• 修改结账页面HTML：

<div class="total">
  <form id="checkoutForm" action="index.html" method="GET" 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>
    <!-- 新增隐藏输入框用于传递total参数 -->
    <input type="hidden" id="totalInput" name="total" value="">
    <button type="submit" class="buy-btn" style="background-color: rgb(29, 4, 216);">Continue to purchase</button>
    <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>
  </form>
</div>

• 修改脚本部分，计算完total后给隐藏输入框赋值，移除无效的自动跳转和passtotal代码：

if (storedCartItem) {
  const cartItem = JSON.parse(storedCartItem);
  let subtotal = 0;

  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>
        `;
    cartItemsDiv.appendChild(cartItemElement);

    const price = Number(cartItem[i].price.replace("$", ""));
    subtotal += price;
  }

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

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

  // 给隐藏输入框赋值（不带$符号）
  document.getElementById("totalInput").value = total.toFixed(2);
}

方案二：通过按钮点击事件手动跳转 #

如果不想依赖表单，直接给按钮绑定点击事件构造跳转URL：

• 修改HTML按钮类型为button：

<button type="button" class="buy-btn" id="buyBtn" style="background-color: rgb(29, 4, 216);">Continue to purchase</button>

• 在脚本中添加事件监听：

if (storedCartItem) {
  // 原有计算total的代码保持不变
  const cartItem = JSON.parse(storedCartItem);
  let subtotal = 0;

  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>
        `;
    cartItemsDiv.appendChild(cartItemElement);

    const price = Number(cartItem[i].price.replace("$", ""));
    subtotal += price;
  }

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

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

  // 绑定按钮点击事件
  document.getElementById("buyBtn").addEventListener("click", function() {
    window.location.href = `index.html?total=${total.toFixed(2)}`;
  });
}

3. 修正其他代码错误 #

• passtotal函数中localStorage.getItem("total", total)是错误用法，getItem仅接收一个参数，存储值应该用localStorage.setItem("total", total)，如果用URL参数传递可直接删除此函数。
• clearCartItems函数中cartItemCount未定义，需补充定义（比如从localStorage获取购物项长度），避免报错。

验证效果 #

修改后进入结账页面不会自动跳转，点击「Continue to purchase」按钮后会跳转到index.html?total=xxx.xx，支付页脚本可正常获取并显示total值。

内容的提问来源于stack exchange，提问作者Danijel Krnic