提交HTML表单时Alert提示未显示、.html()方法无法回显数据问题求助

核心错误点 #

• 变量作用域错误：你在if/else代码块内部用let关键字声明delivery变量，let存在块级作用域限制，仅在当前声明的代码块内有效，你后续拼接回显字符串时访问的delivery属于未定义变量，会直接触发JS运行错误，导致回显逻辑中断。
• Alert换行语法错误：原生alert()弹窗仅支持纯文本内容，不识别HTML的<br>换行标签，需要换行时要使用转义字符\n。
• 复选框选中判断写法不严谨：原写法$('#delivery:checked').val() == 'y'在复选框未选中时，选择器匹配不到元素会返回undefined，虽然也能触发else分支，但更稳妥的写法是用is(':checked')直接判断选中状态。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="scripts/jquery-3.2.1.js"></script>
    
    <script>
        function displayInfo() {
            let product = $('#productName').val();
            let quantity = parseInt($('#qty').val());
            // 提前在块外部声明delivery变量
            let delivery;
            // 改用稳妥的选中状态判断
            if ($('#delivery').is(':checked')) {
                delivery = "需要配送";
            } else {
                delivery = "无需配送";
            }
            var info = "商品名称：" + product + "<br>" + "购买数量：" + quantity + "<br>" + "是否配送：" + delivery;
            $("#info").html(info);

            // 如需使用alert弹窗，用以下写法（换行用\n）
            // alert("商品名称：" + product + "\n" + "购买数量：" + quantity + "\n" + "是否配送：" + delivery);
        }
    </script>

</head>
<body>
    <h1>示例页面</h1>
    
    <form onsubmit="displayInfo(); return false;">
        <p>输入你要购买的商品名称：<input type="text" id="productName"/></p>
        <p>输入你要购买的数量：<input type="text" id="qty" /></p>
        <p>是否需要配送？<input type="checkbox" id="delivery" value="y" /></p>
        <p><input type="submit" value="提交订单" /></p>
    </form>

    <div id ="info"></div>
</body>
</html>

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