如何按用户作答顺序展示表单值？JS display函数失效排查

代码无控制台报错但display()函数无法生效、效果不符合预期，是存在多处拼写、语法、逻辑错误，具体问题和修复方式如下：

具体错误与对应解决方案 #

• 事件属性拼写错误：展示按钮的点击事件属性被错写为onlcick，浏览器无法识别该属性，点击按钮时根本不会触发display()函数。修复：将属性名改为正确的onclick，同时给属性值加上双引号符合HTML规范。
• 函数嵌套与语法闭合错误：getgender()、display()两个函数被错误嵌套在submitsurvey()函数内部，且submitsurvey()缺少闭合大括号，导致全局作用域无法访问到这两个函数，点击事件触发时找不到对应执行逻辑。修复：将两个函数移到submitsurvey()外部，补全submitsurvey()的闭合大括号，让三个函数处于同级全局可访问的作用域。
• 性别值获取逻辑失效：第一，submitsurvey()中错误尝试获取id为gender的
  标签的value值，form标签本身不存在value属性，无法拿到选中的单选按钮结果；第二，代码中从未调用过写好的getgender()函数，存储性别的变量始终为undefined；第三，存储性别的变量命名为window.male语义完全错误，无法对应所有性别选项。修复：删除给form取value的无效代码，在提交逻辑中主动调用性别获取函数，将存储性别的变量名改为语义准确的userGender。
• 全局变量污染风险：直接给window对象挂载属性存用户输入，很容易和浏览器内置属性冲突，比如window.name是浏览器原生的窗口名称属性，会自动对赋值做类型转换，存在隐式bug风险。修复：使用独立的用户信息对象存储输入值，不要随意修改window全局对象的原生属性。
• 展示顺序不符合预期：原display()函数中字符串拼接顺序为年龄+姓名+性别，和要求的「姓名、年龄、性别」展示顺序不符。修复：调整拼接顺序，可增加适当的分隔符让展示内容更易读。
• 其他细节语法错误：一是文档头部标签错写为<header>（该标签是页面内容的语义化头部标签，文档元信息容器应该是<head>标签）；二是多行文本框的cols属性值多写了一个单引号，写成了"'30"，会导致文本框宽度渲染异常。修复：将<header>改为正确的<head>标签，对应闭合标签同步修改；删除cols属性里多余的单引号，改为cols="30"。

修复后可直接运行的完整代码 #

<html>
    <head>
        <style>
            body{
                font-size:16px;
            }
            #maintext{
                font-size:40px;
                margin-bottom: 20px;
            }
        </style>
        <script>
            // 统一存储用户输入的对象，避免污染全局
            const userInfo = {
                name: '',
                age: '',
                gender: ''
            }
           
            function submitsurvey(){
                userInfo.name = document.getElementById("name").value;
                userInfo.age = document.getElementById("age").value;
                // 调用性别获取函数
                getgender();
            }

            function getgender(){
                // 遍历所有性别单选框，拿到选中的值
                const genderRadios = document.querySelectorAll('input[name="gender"]');
                for(let radio of genderRadios){
                    if(radio.checked){
                        userInfo.gender = radio.value;
                        break;
                    }
                }
            }

            function display(){
                // 按姓名、年龄、性别的顺序拼接展示内容，增加分隔符提升可读性
                document.getElementById("maintext").innerHTML = `姓名：${userInfo.name}，年龄：${userInfo.age}，性别：${userInfo.gender}`;
            }
        </script>
    </head>
    <body>
        <div id="maintext"></div>
        Name: <input type="text" id="name" value=""><br><br>
        Age: <input type ="text" id="age" value=""><br><br>
        <form id="gender">
        Gender: <br><input type="radio" value="Male" id="gender1" name= "gender">Male
        <br><input type="radio" value="Female" id="gender2" name= "gender">Female
        <br><input type="radio" value="Other" id="gender3" name= "gender">Other
        <br><input type="radio" value="NoInfo" id="gender4" name= "gender">I prefer not to disclose
        </form>
        <br><br> 
        Please leave any other comments below!<br>
        <textarea id="comments" cols="30" rows="5"></textarea><br><br> 
        <button onclick="submitsurvey()">Submit Survey</button>  
        <button onclick="display()">Display Name (run after submit)</button>
    </body>
</html>

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