点击按钮输出输入框文本时页面内容被清空的JavaScript问题求助

为什么点击按钮后页面内容被清空？ #

你用的document.write()在页面加载完成后调用时，会直接清空整个HTML文档。因为页面加载完毕后，文档流已经关闭，此时调用document.write()会强制打开一个新的文档流，覆盖掉原来的所有内容，这就是其他内容消失的原因。

另外你的JS代码还有个语法错误：let = Text是无效的变量声明，正确写法是let Text;或者直接在函数内部声明变量。

修正方案：用DOM操作替代document.write #

我们可以通过创建新元素或者修改已有元素的方式来显示输入的文本，这样不会影响页面原有内容。

方法1：直接在页面追加内容 #

修改后的JavaScript代码：

// 正确声明变量
let inputText;
document.getElementById("Button7").onclick = function () {
    inputText = document.getElementById("myText").value;
    // 创建一个<p>元素来存放文本
    const newPara = document.createElement('p');
    newPara.textContent = inputText;
    // 将新元素添加到页面body中
    document.body.appendChild(newPara);
};

方法2：用专门的容器显示内容（更推荐） #

先在HTML里加一个用来放输出内容的容器：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" id="myText" placeholder="enter text"> <br>
    <button id="Button7">enter</button>
    <!-- 新增输出容器 -->
    <div id="output-container"></div>

    <script type="text/javascript" src="index.js"></script>
    <h1>my first website test</h1>
</body>
</html>

然后修改JavaScript代码，把文本插入到这个容器里：

document.getElementById("Button7").onclick = function () {
    const inputText = document.getElementById("myText").value;
    const outputContainer = document.getElementById("output-container");
    // 追加新内容
    const newText = document.createElement('p');
    newText.textContent = inputText;
    outputContainer.appendChild(newText);
    // 如果要替换容器里的内容，用下面这行代替上面三行：
    // outputContainer.textContent = inputText;
};

这样点击按钮后，输入的文本会显示在指定容器里，页面原有内容不会被清空。

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