Uncaught TypeError: 无法读取undefined的length属性问题排查求助

让我们一步步排查和修复你的代码问题，帮你搞定这个功能：

1. 直接触发第73行错误的核心问题 #

你的listItems函数里有两个小问题，叠加起来导致了这个错误：

• 你明明获取了列表元素var stuffList = document.getElementById('stuffList');，但最后赋值时却用了完全未定义的foodList.innerHTML = output;
• 循环变量i没有声明，会变成全局变量，虽然不会直接引发当前错误，但会导致潜在的代码污染

先修复这个函数：

function listItems(tx, rs) {
  var output = '';
  var stuffList = document.getElementById('stuffList');
  // 声明循环变量i，同时用正确的变量名操作列表
  for(let i = 0; i < rs.rows.length; i++) {
    output += renderItems(rs.rows.item(i));
  }
  stuffList.innerHTML = output; // 这里改成stuffList，和上面的变量名保持一致
}

2. 修复addItem函数的输入获取与SQL插入错误 #

你当前获取输入框的方式完全不对——document.getElementById只能接受一个ID参数，没办法同时拿到两个输入框。而且插入数据库时只传了一个值，和SQL语句里的两个占位符不匹配，这会导致数据库操作失败，进而引发后续查询异常：

function addItem() {
  // 分别获取两个输入框的值
  var personInput = document.getElementById("person");
  var placeInput = document.getElementById("place");
  var personValue = personInput.value.trim();
  var placeValue = placeInput.value.trim();

  // 可选：添加简单的输入验证，避免插入空内容
  if(!personValue || !placeValue) {
    alert("请填写person和place的内容哦！");
    return;
  }

  db.transaction(function(tx) {
    // 传入两个参数，对应SQL里的两个?占位符
    tx.executeSql("INSERT INTO stuffLogs (person,place) VALUES (?,?)", [personValue, placeValue], gotSuccess, gotError)
  });

  // 清空两个输入框
  personInput.value = "";
  placeInput.value = "";
  // 不用重新加载页面，直接调用storeItems刷新列表即可
  storeItems();
}

3. 修复renderItems函数的HTML与字段错误 #

• 你返回的HTML标签缺失了开头的<，会导致页面渲染异常
• 你试图访问row.stuffLogs，但你的数据库表根本没有这个字段，应该用row.person和row.place：

function renderItems(row) {
  return `<ons-list-item>${row.person} - ${row.place}
            <div class="right"> 
              <ons-button><ons-icon icon="trash"></ons-icon></ons-button>
            </div>
          </ons-list-item>`;
}

4. 额外的优化建议 #

• 给数据库的id字段设置自增主键，避免手动处理唯一ID的麻烦：

let db; // 全局声明db变量，避免作用域问题
function openDb() {
  db = openDatabase('Stuff1', '1', 'StuffV', 2 * 1024 * 1024);
  db.transaction(function (tx) {
    // 把id设为自增主键，数据库会自动帮我们生成唯一ID
    tx.executeSql("CREATE TABLE IF NOT EXISTS stuffLogs (id INTEGER PRIMARY KEY AUTOINCREMENT, person TEXT, place TEXT)");
  });
}

• 简化gotSuccess回调，避免重复调用storeItems()：

function gotSuccess(tx) {
  console.log("数据操作成功啦");
}

为什么会出现这个错误？ #

当你执行错误的SQL插入（只传一个参数）时，数据库操作会失败并触发gotError，但后续的查询可能因为之前的异常返回了不正常的结果集rs，导致rs.rows变成undefined，最终引发"Cannot read property 'length' of undefined"的错误。修复插入逻辑后，查询就能正常返回结果集，哪怕列表是空的，rs.rows.length也会是0，不会再抛出错误。

按照上面的步骤修复后，你就能正常输入person和place，点击按钮插入数据，列表也会实时刷新显示新增的条目啦！

内容的提问来源于stack exchange，提问作者Snake_In-My.Boot