如何在可编辑div文本编辑完成后更新HTML元素？

你当前的代码存在两个问题：一是onclick事件会在点击瞬间触发，导致立即更新；二是event.value无法获取可编辑div的内容，需要用textContent或innerText来读取内容。

下面是几个实用的替代方案：

方案1：使用blur事件（编辑完成后失去焦点时更新） #

这最贴合你的需求——当用户编辑完div并点击页面其他区域，让div失去焦点时，再更新数组：

nameDiv.onblur = () => {
  allSectionsArray[sectionNumber][2] = nameDiv.textContent.trim();
}

添加trim()是为了清除内容首尾的空白字符，可根据实际需求决定是否保留。

方案2：使用input事件（实时同步更新） #

如果需要在用户编辑内容的过程中实时同步到数组，就用input事件，每输入一个字符都会触发更新：

nameDiv.oninput = () => {
  allSectionsArray[sectionNumber][2] = nameDiv.textContent.trim();
}

方案3：结合keydown事件（按下回车确认后更新） #

如果希望用户按下回车来确认编辑完成，再执行更新逻辑，可以这样写：

nameDiv.onkeydown = (event) => {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止回车在div中生成换行
    allSectionsArray[sectionNumber][2] = nameDiv.textContent.trim();
    nameDiv.blur(); // 可选：让div失去焦点，结束编辑状态
  }
}

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