求根据年龄分类人群的简易HTML+JavaScript代码（附错误代码求助）

原代码的问题点 #

• 条件判断逻辑错误：你写的age == 0 && age <=2这类判断完全不符合区间要求，正确的区间判断应该是age >= 起始年龄 && age <= 结束年龄，比如0-2岁要写成age >= 0 && age <= 2。
• 未获取输入值：代码里的age变量没有定义，也没有从输入框读取用户输入的年龄，导致判断无依据。
• 按钮事件错误：按钮用onsubmit是错误的，onsubmit是表单专属事件，普通按钮应该用onclick触发函数。
• 缺少结果显示容器：代码里用document.getElementById("demo")获取元素，但页面里没有这个id的元素，结果无法显示。
• 冗余的外部脚本引入：你引入了js/age.js但没用到，可直接删除。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>年龄分类器</title>
</head>
<body>
    Age: <input type="number" id="ageInput">
    <button onclick="myFunction()">Find Category</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            // 获取输入框的值并转为数字类型
            var age = Number(document.getElementById("ageInput").value);
            var msg;

            // 正确的区间判断逻辑
            if (age >= 0 && age <= 2) {
                msg = "Toddler";
            } else if (age >= 3 && age <= 11) {
                msg = "Child";
            } else if (age >= 12 && age <= 17) {
                msg = "Adolescent";
            } else {
                msg = "Adult";
            }

            // 将分类结果显示到页面
            document.getElementById("demo").innerHTML = msg;
        }
    </script>
</body>
</html>

额外说明 #

• 把输入框类型改成type="number"，可以限制用户只能输入数字，避免非数字输入的逻辑错误。
• 用Number()把输入值转为数字类型，因为输入框的value默认是字符串，直接做数值比较会出问题。
• 每个区间判断都明确了起始和结束的范围，逻辑更清晰易懂。

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