如何使用 JavaScript 实现一个简易的购物车功能？

// 获取页面元素
const leftBox = document.getElementById("left-box");
const rightBox = document.getElementById("right-box");
const addItemButton = document.getElementById("add-item-button");

// 添加点击事件处理程序
leftBox.addEventListener("click", handleLeftBoxClick);

// 添加按钮点击事件处理程序
addItemButton.addEventListener("click", handleAddItemButton);

// 处理左侧框中的点击事件
function handleLeftBoxClick(event) {
  const selectedItem = event.target;
  // 检查是否点击了选项
  if (selectedItem.tagName !== "LI") {
    return;
  }

  // 将选定的选项添加到右侧框
  rightBox.appendChild(selectedItem.cloneNode(true));

  // 从左侧框中删除选定的选项
  leftBox.removeChild(selectedItem);
}

// 处理添加按钮点击事件
function handleAddItemButton() {
  // 查找左侧框中选中的选项
  const selectedItems = leftBox.querySelectorAll("li.selected");

  // 将选定的选项添加到右侧框
  for (const item of selectedItems) {
    rightBox.appendChild(item.cloneNode(true));
  }

  // 从左侧框中删除选定的选项
  for (const item of selectedItems) {
    leftBox.removeChild(item);
  }
}