如何使用JavaScript将HTML表单数据存入数组并完成内容展示

现有代码存在以下几个核心错误：

• getElementById是document对象的专属方法，必须加document.前缀才能调用，直接写会触发未定义报错
• 输入框<input>的用户填写内容存储在自身的value属性中，不需要额外加innerHTML，你写的.innerHTML.value属于语法误用，input是自闭和标签本身没有内部HTML内容
• 页面加载完成后调用document.write会清空原有页面的全部内容，体验很差，建议新增专门的结果展示容器输出内容
• 原代码中存放页面元信息、标题的标签误写为<header>，正确标签应为<head>，<header>是页面主体内的语义头部标签

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第二次作业</title>
</head>
<body>
    <h1>欢迎！</h1>
    <p>请在下方表单中填写数据：</p>
    <form>
        姓名：<input type="text" id="name"><br>
        姓氏：<input type="text" id="lname"><br>
        年龄：<input type="text" id="age"><br>
        居住城市：<input type="text" id="city"><br>
        是否有宠物：<input type="text" id="pet"><br>
        宠物名字：<input type="text" id="pet_name"><br>
        <button type="button" onclick="saveAndShowData()">提交</button>
    </form>
    <!-- 新增结果展示区域，不会清空原有页面内容 -->
    <div id="result" style="margin-top: 20px;"></div>
    <script type="text/javascript">
    function saveAndShowData(){
        // 正确获取表单值存入数组
        var info = [
            document.getElementById("name").value,
            document.getElementById("lname").value,
            document.getElementById("age").value,
            document.getElementById("city").value,
            document.getElementById("pet").value,
            document.getElementById("pet_name").value
        ]
        // 组装结果输出到指定区域
        var resultText = `
            <p>你的名字是：${info[0]}</p>
            <p>你的姓氏是：${info[1]}</p>
            <p>你的年龄是：${info[2]} 岁</p>
            <p>你居住在：${info[3]}</p>
            <p>是否有宠物：${info[4]}</p>
            <p>你的宠物名字是：${info[5]}</p>
        `
        document.getElementById("result").innerHTML = resultText
    }
    </script>
</body>
<footer>
</footer>
</html>

内容的提问来源于stack exchange，提问作者Augusto Tomas Mancuso