购物车商品无法在网页显示的技术求助

嘿，我帮你排查了下问题，都是几个新手容易踩的小坑，咱们一个个修正，很快就能让购物车商品正常显示在页面上：

1. 先解决最核心的script标签问题 #

你现在写的 <script src="script.js"> 同时在标签内部塞了函数代码，这是不行的！当script标签带了src属性时，标签内部的JavaScript代码会被浏览器直接忽略，所以你的updateCartDisplay函数和重写的addToCart根本没被加载，这就是页面没反应的关键原因。

解决办法：把标签内部的代码全部移到script.js文件里，或者拆成两个独立的script标签（更推荐前者，代码结构更清晰）。

2. 整合所有JS逻辑，避免重复定义 #

你现在在script.js和HTML的script里都写了addToCart函数，这会导致逻辑覆盖和混乱。我们把所有购物车逻辑都统一放到script.js里，修改后的代码如下：

// 全局购物车数组
let cart = [];

// 添加商品到购物车
function addToCart(item) {
  cart.push(item);
  console.log(item + " added to cart.");
  // 每次添加后更新页面显示
  updateCartDisplay();
}

// 专门负责更新页面购物车展示的函数
function updateCartDisplay() {
  const cartList = document.getElementById('cart-items');
  // 先清空购物车现有内容，避免重复添加
  cartList.innerHTML = '';
  
  // 遍历购物车数组，生成每个商品的列表项
  cart.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    
    // 顺便加个删除按钮，提升用户体验
    const removeBtn = document.createElement('button');
    removeBtn.textContent = '删除';
    removeBtn.style.marginLeft = '10px';
    removeBtn.onclick = () => removeFromCart(item);
    
    li.appendChild(removeBtn);
    cartList.appendChild(li);
  });
}

// 从购物车移除商品的函数
function removeFromCart(item) {
  const index = cart.indexOf(item);
  if (index === -1) {
    console.log(item + " not found in cart.");
  } else {
    cart.splice(index, 1);
    console.log(item + " removed from cart.");
    // 移除后也要更新页面显示
    updateCartDisplay();
  }
}

// 原来的控制台测试代码，需要的话可以保留，注释掉也不影响页面功能
// addToCart("item");
// removeFromCart("item");

3. 修正HTML里的小错误 #

你第一个显卡的按钮里写的是addToCart('NVIDIA GeForce RTX 4090 Ti')，但对应的商品是RTX 3080 Ti，文字不一致容易让用户困惑，改成和商品名称一致就好：

<h2>Graphics Cards</h2>
<ol>
  <li>NVIDIA GeForce RTX 3080 Ti - €1,199 <button onclick="addToCart('NVIDIA GeForce RTX 3080 Ti')">Add to Cart</button></li>
  <li>AMD Radeon RX 6900 XT - €999 <button onclick="addToCart('AMD Radeon RX 6900 XT')">Add to Cart</button></li>
</ol>

<h1> Items Currently In Your Cart</h1>
<ul id="cart-items">
  <!-- Items will be added here automatically -->
</ul>

<!-- 先引入外部的script.js文件 -->
<script src="script.js"></script>

测试效果 #

现在点击“Add to Cart”按钮，商品就会自动出现在页面下方的购物车列表里，点击每个商品后面的删除按钮还能移除对应商品，控制台也会同步输出操作日志，完全符合你的需求啦！

备注：内容来源于stack exchange，提问作者user22912810