点击HTML表单提交按钮无法弹出显示表单信息alert的问题

代码存在两处阻断执行的错误，导致alert无法弹出：

• JS变量名不匹配：获取姓名输入值时声明的变量是n，拼接alert内容时错误引用了未定义的变量s，触发引用错误后JS直接终止执行
• 未拦截表单默认提交逻辑：submit按钮点击后会默认执行表单原生提交，当前action指向当前页锚点，JS报错后会直接触发页面刷新，就算JS正常执行，弹窗也会因页面即时刷新无法被看到
• 附加问题：textarea开闭标签之间存在多余缩进，默认获取的留言内容开头会携带无意义空白字符

1. 修正alert中的变量引用，把错误的s替换为已声明的n
2. 给提交处理函数传入事件对象，调用方法阻止表单默认提交跳转行为
3. 清理textarea标签内部的多余缩进，避免获取到无意义的空白内容

<form action="#" method="get">
    <fieldset>
        <legend>用户信息</legend>
        <label for="nome">姓名：</label>
        <input id="nome" name="nome" type="text" />
        <br />
        <label for="idade">年龄段：</label>
        <select id="idade" name="idade">
            <option value="menor">&lt;18</option>
            <option value="jovem">18-21</option>
            <option value="jovemadulto">22-29</option>
            <option value="adulto">30-39</option>
            <option value="adultoavancado">40-49</option>
            <option value="idoso">&gt;=50</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>校园可持续发展建议</legend>
        <label for="mensagem">留言：</label><br />
        <textarea id="mensagem" name="mensagem" rows="10" cols="50" placeholder="请输入你的想法"></textarea>
        <br />
        <input id="enviar" name="enviar" type="submit" onClick="submitForm(event)" value="提交">
        <script>
            function submitForm(e) {
                // 阻止表单默认提交刷新
                e.preventDefault();
                var n = document.getElementById('nome').value;
                var i = document.getElementById('idade').value;
                var m = document.getElementById('mensagem').value;

                alert("姓名: "+n+"\n年龄段: "+i+"\n留言: "+m);
            }
        </script>
        <input id="limpar" name="limpar" type="reset" value="清空" />
    </fieldset>
</form>

替换代码后填写内容点击提交，即可正常弹出展示所有填写信息的alert弹窗，不会出现无响应、页面自动刷新的问题。

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