Uncaught TypeError错误排查及购物车总额同步至支付页问题

问题原因分析 #

1. 控制台Cannot set properties of null报错：结算页代码尝试给不存在的#total_price元素设置value属性，该元素未在HTML中定义，导致获取到null后赋值失败。
2. 总额无法同步至支付页：
   • 结算页的passtotal函数错误使用value属性获取<span>元素内容（<span>无value属性，应使用textContent）。
   • 跳转按钮的默认表单提交行为未触发passtotal函数，导致总额未存入localStorage。
   • 支付页错误对localStorage中的字符串金额执行JSON.parse，非JSON格式内容会引发解析错误。

分步解决方案 #

1. 修复控制台null错误 #

直接删除结算页JavaScript中操作不存在元素的代码：

// 移除以下两行代码
const totalPriceInput = document.querySelector("#total_price");
totalPriceInput.value = total.toFixed(2);

2. 修正结算页的总额传递逻辑 #

方式一：绑定表单提交事件

• 修改passtotal函数，正确获取总额文本：

function passtotal(){
  // 用textContent获取span元素的文本内容
  var total = document.getElementById('total').textContent;
  localStorage.setItem("value", total);
  return true; // 允许表单正常提交跳转
}

• 给form标签添加onsubmit事件，确保跳转前执行函数：

<form action="index.html" class="total" onsubmit="return passtotal()">

方式二：修改按钮为普通点击跳转（更直观）

• 将提交按钮的type改为button，避免默认表单提交，手动绑定跳转逻辑：

<button type="button" class="buy-btn" style="background-color: rgb(29, 4, 216);" onclick="passtotal(); window.location.href='index.html'">Continue to purchase</button>

• 同步修改passtotal函数：

function passtotal(){
  var total = document.getElementById('total').textContent;
  localStorage.setItem("value", total);
}

3. 修正支付页的总额展示逻辑 #

移除JSON.parse，直接读取localStorage中的字符串，同时处理空值情况：

var totalValue = localStorage.getItem("value");
// 若localStorage无数据，默认显示$0
document.getElementById("total").innerHTML = totalValue || "$0";

可选优化（传递纯数字金额） #

如果需要在支付页更灵活地处理金额（比如后续对接支付接口），可以传递纯数字而非带$的字符串：

• 结算页passtotal函数修改：

function passtotal(){
  var totalText = document.getElementById('total').textContent;
  // 提取数字部分并存储
  var totalNum = totalText.replace("$", "");
  localStorage.setItem("totalAmount", totalNum);
  window.location.href='index.html';
}

• 支付页代码修改：

var totalAmount = localStorage.getItem("totalAmount");
// 格式化显示带$的金额，空值时显示$0
document.getElementById("total").innerHTML = totalAmount ? `$${parseFloat(totalAmount).toFixed(2)}` : "$0";

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