如何解决contenteditable元素修改后无法向Node/Express服务器发送新内容？

你的代码存在两个核心问题，导致无法正确触发更新：

1. 参数传递逻辑错误
   你在点击事件中传给updateCharacter的是characterName.innerHTML（仅为编辑后的名字字符串），但在updateCharacter函数里却把它当成包含id和characterName的对象来使用，这会直接导致data.id和data.characterName读取失败，服务器根本无法定位要更新的目标数据。

2. 缺少更新所需的唯一标识（id）
   PUT更新操作必须明确指定要修改的对象ID，你当前的代码没有将对应character的id传递给更新函数，服务器无法确定要修改哪条资源。

1. 调整渲染函数中的点击事件绑定 #

async function printCharacters(){
    const get = await fetch ('http://localhost:3000/api')
    const characters = await get.json()

    for(const character of characters){
        const characterContainers = document.createElement("div");
        main.appendChild(characterContainers);
        characterContainers.className = "characterContainer";
        const characterName = document.createElement("p");
        characterName.setAttribute("contenteditable", "true");
        characterName.textContent = character.characterName; // 用textContent避免HTML注入风险
        characterContainers.appendChild(characterName);
        const updateButton = document.createElement("button");
        updateButton.className = "updateButton";
        updateButton.innerText = "Update";
        characterContainers.appendChild(updateButton);
        // 点击时传递目标ID和编辑后的新名字
        updateButton.addEventListener("click", () => {
            const updatedName = characterName.textContent.trim();
            updateCharacter(character.id, updatedName);
        });
    }
}

2. 修改更新函数的参数与逻辑 #

async function updateCharacter(characterId, newName){
    const response = await fetch (`http://localhost:3000/api/update/${characterId}`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "characterName": newName
        })
    })
    // 更新后重新渲染列表，保证页面内容与服务器数据同步
    printCharacters();
    return response.json();
};

额外提示 #

• 优先使用textContent读取编辑内容，避免用户输入的HTML代码被解析，提升页面安全性。
• 更新完成后调用printCharacters()刷新页面，确保展示内容与服务器数据一致。
• 可给contenteditable元素添加边框、背景色等样式，让用户直观识别可编辑区域。

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