如何获取HTML表单用户输入并将结果显示在网页上

现有代码存在的问题 #

• 仅定义了out处理函数，未绑定表单的submit提交事件，函数无法被触发执行
• 表单默认提交行为会触发页面刷新，会清空刚提交的内容，未做阻止处理
• out函数逻辑不完整：仅创建了空的li元素，没有将输入的内容赋值给li，也没有将li元素插入到目标ul列表中

修复后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>表单输入展示</title>
</head>
<body>
    <header>
        <h1>Give me miracle</h1>
    </header>
    <aside class="input">
        <form action="#" id="form">
            <label for="name">在这里输入你的名字</label>
            <input type="text" name="name" id="name" required>
            <input type="submit" name="submit" id="submit" value="提交">
        </form>
    </aside>
    <aside class="output">
        <h1>输出区域</h1>
        <ul id="myUl">
            <li>balls</li>
            <li>dummy</li>
        </ul>
    </aside>    
    <script>
        // 获取表单元素绑定提交事件
        const form = document.getElementById('form')
        form.addEventListener('submit', out)

        function out(e){
            // 阻止表单默认提交刷新页面的行为
            e.preventDefault()
            // 获取输入内容
            const pliss = document.getElementById("name").value;
            const show = document.getElementById("myUl");
            // 生成li元素并写入内容
            const theOutput = document.createElement("li");
            theOutput.textContent = pliss
            // 将li插入到列表中
            show.appendChild(theOutput)
            // 清空输入框方便下次输入
            document.getElementById("name").value = ''
        }
    </script>
</body>
</html>

功能验证 #

点击提交按钮后，输入框的内容会自动追加到下方列表的末尾，页面不会刷新，输入框会自动清空可直接输入下一条内容。

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