HTML可编辑文本块保存时清空页面内容问题求助（新手）

问题分析 #

你的代码存在两个关键问题导致页面异常清空：

1. 按钮默认行为触发页面刷新：部分浏览器会将未指定type的按钮默认视为提交按钮，即便没有表单包裹，也可能引发意外的页面重载，导致所有内容被清空。
2. 主动清空文本框：代码中document.getElementById("editText").value = "";这行代码会在保存后强制清空输入框，不符合你希望保留文本的需求。

此外，需确保服务器返回合法的JSON格式响应，否则response.json()会抛出错误，但这不会直接导致页面清空。

修复后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suggesties</title>
</head>
<body>
    <h1>Edit and Save Text</h1>

    <textarea id="editText" rows="4" cols="50"></textarea>
    <br>
    <!-- 添加type="button"确保按钮为普通按钮，避免触发提交行为 -->
    <button type="button" onclick="saveText()">Save</button>

    <div id="savedTextContainer"></div>

    <script>
        function saveText() {
            const editedText = document.getElementById("editText").value;

            fetch("http://myip:3000/save", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ text: editedText }),
            })
                .then(response => {
                    // 先检查响应状态是否正常
                    if (!response.ok) {
                        throw new Error(`请求失败：状态码${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        const savedTextContainer = document.getElementById("savedTextContainer");
                        savedTextContainer.innerHTML += `<p>${editedText}</p>`;
                        // 移除清空文本框的代码，保留输入内容
                        // document.getElementById("editText").value = "";
                    } else {
                        console.error("保存失败：", data.message);
                    }
                })
                .catch(error => {
                    console.error("保存出错：", error);
                });
        }
    </script>
</body>
</html>

关键修改说明 #

• 给按钮添加type="button"，彻底杜绝意外页面重载的可能。
• 删除清空文本框的代码，让输入的文本始终保留在文本块中。
• 增加响应状态检查，更直观地处理服务器返回的错误情况。

修改后，保存操作不会清空页面任何内容，输入的文本会留在文本框内，同时保存的内容会追加显示在页面下方的容器中。

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