点击Div弹出文本框后点击Add Item报错：Cannot read properties of undefined (reading 'trim')

算力阿峰

2026-7-10

解决点击Add Item按钮时的TypeError报错问题

报错原因

你对trim()的理解没错，它确实是用来去除字符串首尾空白、判断输入是否为空的方法。但这个报错的核心是**newItem的值为undefined**——也就是代码里的shapeInput.val()没能拿到有效输入值，大概率是两种情况：

对应shape的div里找不到class为shape-input的输入框元素
找到的元素不是input/textarea这类可调用val()的表单元素，导致val()返回undefined

修复方案

给代码加两层防护逻辑，先确认输入框存在，再确认输入值有效后再调用trim()。修改后的addListItem函数如下：

// Add a new list item
function addListItem(shapeId) {
  const shape = $(`#${shapeId}`);
  const shapeInfo = shape.data("info");
  if (shapeInfo) {
    const shapeInput = shape.find(".shape-input");
    // 先检查是否找到目标输入框
    if (!shapeInput.length) {
      console.log(`id为${shapeId}的元素下找不到.shape-input输入框`);
      return;
    }
    const newItem = shapeInput.val();
    // 确认输入值不是undefined后，再判断是否为空
    if (newItem !== undefined && newItem.trim() !== "") {
      if (!shapeInfo.items) {
        shapeInfo.items = [];
      }
      shapeInfo.items.push(newItem);
      shapeInput.val("");
      populateShapeList(shape);
      saveShapeData();
    }
  }
}