如何用JavaScript统计用户输入年龄对应三个分组的累计人数？

安全阿岳

2026-10-15

问题根因

你遇到的计数重置问题核心是三个分组计数器的声明位置错误：你把juniorCounter、intermediateCounter、seniorCounter都定义在了printOutAges函数内部，每次点击提交触发函数执行时，这三个变量都会被重新赋值为0，自然无法实现累计计数的效果。

另外还有两个可优化的细节：

输入框取到的value默认是字符串类型，建议转成数字后再做大小比较，避免隐式类型转换带来的异常
如果后续你把提交按钮移到form标签内部，记得要阻止表单默认提交行为，避免页面刷新清空计数器

修复后代码

JS代码（week5.js内容）

// 把计数器提到函数外部，全局作用域下只会初始化一次，后续调用函数直接累加
var juniorCounter = 0 ;
var intermediateCounter = 0;
var seniorCounter = 0;

function printOutAges(){
   // 把输入的年龄转成数字类型，避免类型匹配问题
   var sAge =  Number(document.getElementById("participatntAge").value);
   
   if (sAge >= 4 && sAge <= 7){
       juniorCounter ++;
   }
   else if (sAge >= 8 && sAge <= 11){
    intermediateCounter ++;
   }
   else if (sAge >= 12 && sAge <= 15){
    seniorCounter ++;
   }

   document.getElementById("recievedInfo").innerHTML = "初级组人数：" + juniorCounter + '<br>' + "中级组人数：" + intermediateCounter + '<br>' +"高级组人数：" + seniorCounter;
   // 提交后清空输入框，方便下次输入
   document.getElementById("participatntAge").value = '';
}