JS数组元素展示、重复校验、删除功能故障排查及换行显示咨询

问题根因 #

• 变量取值时机错误：groceryitem 是页面初始化时一次性读取的输入框值，后续点击按钮时不会重新获取当前输入内容，永远为初始空值，导致所有判断逻辑失效
• 添加逻辑判断错误：Array.includes() 方法返回布尔值，原代码直接用字符串和布尔值做相等比较，逻辑完全错误
• 删除逻辑循环条件错误：原循环条件写为i <= groceryList.length，会出现数组下标越界问题
• 列表展示逻辑不符合需求：toString() 会用逗号拼接数组元素，要实现每行一个元素需要用换行标签拼接，且要使用innerHTML而非innerText渲染才能生效

修正后代码 #

JavaScript部分 #

var groceryList = [];
var description = document.getElementById("groceryinfo");

function Add() {
  // 每次点击按钮时获取当前输入框内容
  var groceryitem = document.getElementById('Text1').value.trim();
  // 可选：增加空值校验，避免添加空内容
  if (!groceryitem) {
    alert("请输入有效商品名称");
    return;
  }
  if (!groceryList.includes(groceryitem)) {
    groceryList.push(groceryitem);
    // 用<br>拼接元素实现每行展示一个，用innerHTML渲染换行效果
    description.innerHTML = groceryList.join('<br>');
  } else {
    alert("Duplicate Entry");
  }
}

function Remove() {
  var groceryitem = document.getElementById('Text1').value.trim();
  if (groceryList.includes(groceryitem)) {
    if (confirm("Do you want to delete item")) {
      // 直接查找对应下标删除，无需全量遍历
      const targetIndex = groceryList.indexOf(groceryitem);
      groceryList.splice(targetIndex, 1);
      description.innerHTML = groceryList.join('<br>');
    }
  } else {
    alert("Item not in list");
  }
}

HTML部分 #

原有HTML无需调整，完整代码如下：

My grocery list
<br/>
<br/>
<div id="groceryinfo"></div>
<br/>
<br/>
<input id="Button1" type="button" value="Add this item" onclick="Add()"/>
<input id="Text1" type="text"/>
<br/>
<input id="Button2" type="button" value="Remove this item" onclick="Remove()"/>

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