按下Enter键后innerHTML未更新，order变量无法同步页面显示求助

核心问题 #

1. 表单默认提交导致页面刷新：按下Enter时会触发表单默认提交行为，页面刷新后order变量重置为初始值1，这是order显示始终不变的根本原因。
2. 表格DOM操作错误：直接通过table.innerHTML += addrow添加<td>元素，违反表格DOM结构规则（表格直接子元素必须是<tr>），浏览器会自动修正DOM，破坏原有注册行结构，甚至导致之前获取的orderin节点失效。
3. 事件对象未显式声明：使用未声明的event变量，存在兼容性风险。

修复后的完整代码 #

JavaScript

window.addEventListener('keydown', addItem)

let order = 1;

const orderin = document.getElementById('order-register');
orderin.textContent = order;

function addItem(event) {
  const key = event.key;
  const table = document.getElementById('tabelaitens');
  const itemin = document.getElementById('itemin');
  const qttin = document.getElementById('qttin');
  const registerRow = document.querySelector('.linharegister');

  if (key === "Enter") {
    event.preventDefault(); // 阻止表单提交，避免页面刷新

    let itemout, qttout;

    if (itemin.value.trim() !== "") {
      itemout = itemin.value.trim();
    } else {
      // 后续可添加下拉选择逻辑
    }

    if (qttin.value > 0) {
      qttout = qttin.value;
    } else {
      // 后续可添加下拉选择逻辑
    }

    if (itemout && qttout) {
      // 创建新行并设置内容
      const newRow = document.createElement('tr');
      newRow.className = 'linha';
      newRow.innerHTML = `<td class="order">${order}</td><td class="item">${itemout}</td><td class="quantity">${qttout}</td>`;
      
      // 插入到注册行之前，实现顶部添加
      table.insertBefore(newRow, registerRow);

      // 更新order值与显示
      order++;
      orderin.textContent = order;

      // 清空输入框，优化体验
      itemin.value = '';
      qttin.value = '';
    }
  }
}

HTML（无需修改）

保持原有结构即可，注意表单元素需正确包裹在<tr>内。

CSS（无需修改）

原有样式可正常使用。

关键优化点 #

• 用event.preventDefault()阻止表单提交，彻底解决页面刷新导致的order重置问题。
• 使用DOM API创建新行并通过insertBefore插入到指定位置，既保证表格结构合法，又实现了新项在列表顶部添加的需求。
• 用textContent替代innerHTML更新文本，避免XSS风险且性能更优。
• 添加输入框清空逻辑，提升用户操作体验。

内容的提问来源于stack exchange，提问作者Gabriel do Nascimento