JS杂货清单应用如何实现回车键触发添加及空输入拦截功能

数据老陈

2026-10-19

杂货清单应用问题修复方案

问题根源

add 函数没有做触发条件判断：绑定了keydown事件后，任意按键触发都会直接执行新增逻辑，没有限制仅回车键生效
缺少空输入校验：输入框内容为空时也会把空字符串加入清单
回车键判断逻辑错误放置在displayGroceries的循环中，属于完全冗余的错误代码，会导致重复触发新增

修正后的完整JavaScript代码

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');
addInput.addEventListener('keydown', add);

let groceryList = []

// 给add函数新增event参数接收事件对象
function add(event) {
  // 判断触发场景：如果是键盘事件，仅回车键才继续执行
  if (event.type === 'keydown' && event.keyCode !== 13) {
    return
  }
  // 空值校验：去除首尾空格后为空则不执行新增
  const groceryInput = addInput.value.trim()
  if (!groceryInput) {
    return
  }
  groceryList.push(groceryInput);
  addInput.value = '';
  displayGroceries();
}

function remove(event) {
  let position = event.currentTarget.id;
  groceryList.splice(position, 1);
  displayGroceries();
}

function displayGroceries() {
  let groceryUl = document.getElementById('grocery-ul');
  groceryUl.innerHTML = '';

  for (var i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement('li');
    groceryLi.innerHTML = groceryList[i];
    groceryUl.appendChild(groceryLi);
    let removeButton = document.createElement('button');
    removeButton.innerText = "Remove";
    removeButton.addEventListener('click', remove);
    removeButton.id = i;
    groceryLi.appendChild(removeButton);
  }
}