页面传值时图片src出现Null错误，结账页无法正常显示商品图片

核心问题分析 #

• 图片src赋值错误：checkout.html中把localStorage.getItem("imgvalue")（整个img标签的HTML字符串）直接设为img的src属性，导致浏览器无法识别为有效图片路径，显示默认占位图。
• 数组索引错误：updatetotal函数中错误地取了textvalue.split(" | ")[1]（图片路径）计算总价，而非实际价格字段，导致解析失败出现NaN/Null相关错误。
• 未绑定触发函数："Add To Cart"按钮未绑定passvalues函数，点击后不会将商品数据存入localStorage，后续读取时自然拿不到有效值。

具体修复代码 #

1. 修复sproduct6.html的问题 #

（1）给Add To Cart按钮绑定点击事件

修改按钮代码：

<button class="add-cart" onclick="passvalues()">Add To Cart <i class='bx bx-cart-add add-cart'></i></button>

（2）修正updatetotal函数的索引错误

function updatetotal() {
  var textvalue = localStorage.getItem("textvalue");
  if (!textvalue) return; // 避免Null报错
  var price = parseFloat(textvalue.split(" | ")[2].replace('$', ''));
  document.getElementById('total').textContent = '$' + price.toFixed(2);
}

（3）优化localStorage存储（可选）

无需存储整个img标签，直接复用已存的imageSrc：

// 删除这两行冗余代码
// var imgvalue = document.getElementById('product-image').outerHTML;
// localStorage.setItem("imgvalue", imgvalue);

2. 修复checkout.html的问题 #

（1）修正图片src的赋值逻辑

从textvalue中取出正确的图片路径：

const textValueParts = localStorage.getItem("textvalue")?.split(" | ") || [];

// 图片赋值
if (textValueParts.length >= 2) {
  document.getElementById("image").setAttribute("src", textValueParts[1]);
}

// 其他字段加容错处理
document.getElementById("name").textContent = textValueParts[0] || '';
document.getElementById("price").textContent = textValueParts[2] || '';
document.getElementById("licence").textContent = textValueParts[3] || '';

（2）修正checkout里的updatetotal函数

function updatetotal() {
  var textvalue = localStorage.getItem("textvalue");
  if (!textvalue) {
    document.getElementById('total').textContent = '$0.00';
    return;
  }
  var price = parseFloat(textvalue.split(" | ")[2].replace('$', ''));
  document.getElementById('total').textContent = '$' + price.toFixed(2);
}

额外优化建议 #

改用JSON格式存储商品数据，避免字符串分割的索引错误：

// sproduct6.html中存储数据
const productData = {
  name: name,
  imageSrc: imageSrc,
  price: price,
  licence: licence,
  total: total
};
localStorage.setItem("productData", JSON.stringify(productData));

// checkout.html中读取数据
const productData = JSON.parse(localStorage.getItem("productData")) || {};
document.getElementById("name").textContent = productData.name || '';
document.getElementById("image").setAttribute("src", productData.imageSrc || '');
// 其他字段同理

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