JavaScript购物清单项目点击列表项添加删除线功能实现问题求助

以下是你代码中导致功能失效的明确错误点：

• removeNeedItem函数逻辑错误：你将点击元素的id值（字符串类型）赋值给了position变量，字符串没有style属性，直接设置textDecoration会抛出类型错误，不需要额外拿id，直接操作event.currentTarget这个DOM元素即可
• 渲染覆盖问题：你给元素加完删除线后调用了未定义的displayGroc()，就算你是误写想调用displayNeedList()，这个函数执行时会清空整个need-list的内容再重新渲染所有列表项，你刚才手动加的删除线样式会被直接覆盖，自然看不到效果
• 未声明变量/函数：代码中用到的needButton、addNeedItem、displayGroc都没有定义，运行时会直接报错
• 不规范的id赋值：给li元素设置纯数字的id不符合HTML id属性的命名规范，容易出现不可预期的问题

以下是修复后的完整可运行JS代码：

// 数据源新增striked字段记录删除线状态，避免刷新丢失
var grocNeedList = [{ item: "Salmon", Required: true, striked: false }];

function displayNeedList() {
  var needListUl = document.getElementById("need-list");
  needListUl.innerHTML = "";

  for (var i = 0; i < grocNeedList.length; i++) {
    var currentItem = grocNeedList[i];
    var listItem = document.createElement("li");
    listItem.innerText = currentItem.item;
    // 渲染时根据striked状态自动加删除线
    if (currentItem.striked) {
      listItem.style.textDecoration = "line-through";
    }
    listItem.dataset.index = i; // 用自定义dataset存索引，替代不规范的纯数字id
    listItem.addEventListener("click", removeNeedItem); // 用标准方法绑定事件，不写内联onclick
    needListUl.appendChild(listItem);
  }
}

function removeNeedItem(event) {
  var listEl = event.currentTarget;
  var index = listEl.dataset.index;
  // 同步更新数据源的状态
  grocNeedList[index].striked = !grocNeedList[index].striked;
  // 切换删除线样式
  listEl.style.textDecoration = grocNeedList[index].striked ? "line-through" : "none";
}

// 补全你缺失的变量和新增商品逻辑
var needButton = document.getElementById("need-btn");
var addInput = document.getElementById("textbox");

function addNeedItem() {
  var itemName = addInput.value.trim();
  if (itemName) {
    grocNeedList.push({ item: itemName, Required: true, striked: false });
    addInput.value = "";
    displayNeedList();
  }
}

needButton.addEventListener("click", addNeedItem);

// 页面加载完成后渲染初始列表
window.onload = function() {
  displayNeedList();
}

• 样式可以抽成CSS类，比如.striked { text-decoration: line-through; opacity: 0.7; }，通过切换类名来修改样式，比直接操作style属性更灵活，后续要调整已完成项的样式直接改CSS即可
• 所有状态优先存储在数据源数组中，不要只存在DOM节点上，后续要做数据导出、提交后端、列表排序等操作都会更方便
• 不要使用内联事件绑定，用addEventListener可以更灵活的管理事件，也符合逻辑与视图分离的开发规范

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