如何实现点击网页按钮后将输入框内容显示在页面上？

你只需要给现有代码补充少量标识和JS逻辑即可，改动点如下：

• 给input输入框添加id属性，方便JavaScript获取输入内容
• 新增一个专门用来展示内容的DOM节点，你想要内容显示在页面的哪个位置，就把这个节点放在对应位置
• 编写你绑定的text()函数的逻辑，实现取值和渲染
• 如果你不需要向后端提交表单，可直接移除form标签，避免触发默认的表单提交刷新页面的行为

完整可运行代码示例： #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>输入内容展示</title>
    <script>
        function text() {
            // 获取输入框的内容
            const inputVal = document.getElementById('inputContent').value
            // 将内容写入展示区域
            document.getElementById('outputArea').innerText = inputVal
        }
    </script>
</head>
<body>
    <input type="text" id="inputContent">

    <div id="container">
        <button onclick="text()" id="button">Enter</button>
    </div>
    
    <!-- 内容展示区域 -->
    <div id="outputArea"></div>
</body>
</html>

逻辑说明： #

document.getElementById()是用来通过id获取对应DOM元素的方法，.value可以读取输入框内用户输入的内容，.innerText可以给对应DOM节点设置文本内容，点击按钮时就会执行一次取值+赋值的逻辑，实现你要的效果。

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