JavaScript/HTML投票按钮无法禁用、18岁年龄校验及数据存储问题求助

现有代码核心问题 #

• 按钮状态控制、年龄输入监听逻辑全部放在点击投票才触发的pushData函数内，页面加载时不会执行，因此投票按钮不会默认禁用，且每次点击投票都会重复绑定输入事件，造成冗余
• 未在存入数据前做年龄合法性拦截，即便年龄小于18岁，点击按钮依然会把数据存入数组
• 未将输入的年龄转为数字类型，字符串对比可能出现判定错误

修改方案 #

1. JavaScript代码调整 #

把按钮状态控制逻辑从pushData函数中抽离，页面加载完成后直接初始化状态、绑定输入监听，同时在pushData最前面加年龄校验拦截：

// 创建存储数据的数组
var myArr = [];
var VoteArry = [];
var ageEl = document.getElementById('age');

// 页面加载完成后初始化按钮状态、绑定年龄输入监听
manageBtn();
ageEl.addEventListener('input', manageBtn);

function manageBtn() {
  var age = Number(ageEl.value);
  // 年龄小于18或输入为空/非数字时，禁用按钮
  if (age < 18 || isNaN(age)) {
    document.getElementById('age').style.borderColor = '#e52213';
    document.getElementById("Btn").disabled = true;
  } else {
    document.getElementById('age').style.borderColor = '';
    document.getElementById("Btn").disabled = false;
  }
}

function pushData() {
  // 先校验年龄，不满足条件直接终止后续逻辑执行
  var age = Number(ageEl.value);
  if (age < 18 || isNaN(age)) return;

  // 获取输入框的内容
  var Name = document.getElementById('fName').value;
  var Surname = document.getElementById('lName').value;
  var Age = ageEl.value;
  var Country = document.getElementById('countryID').value;
  var Vote = document.getElementById('voteID').value;

  // 合并用户信息为存储格式
  var inputText = "投票数据库:" + "<br/>" + Name + " " + Surname + "<br/>" + Age + "<br/>" + Country + "<br/>" + Vote;

  // 数据存入数组
  myArr.push(inputText);
  VoteArry.push(Vote)
  var pval = "";
  var pvote = "";

  // 各党派票数统计初始化
  var countANC = 0;
  var countDA = 0;
  var countEFF = 0;

  // 拼接所有用户信息展示内容
  for (i = 0; i < myArr.length; i++) {
    pval = pval + myArr[i] + "<br/>";
    pvote = pvote + VoteArry[i];
  }

  // 统计各党派得票数
  for (i = 0; i < VoteArry.length; i++) {
    if ('ANC' == VoteArry[i]) {
      countANC++;
    }
    if ('DA' == VoteArry[i]) {
      countDA++;
    }
    if ('EFF' == VoteArry[i]) {
      countEFF++;
    }
  }
  // 页面渲染统计结果
  document.getElementById('pText').innerHTML = pval;
  document.getElementById('countANC').innerHTML = countANC;
  document.getElementById('countDA').innerHTML = countDA;
  document.getElementById('countEFF').innerHTML = countEFF;
}

2. 可选HTML优化（双重保障按钮初始状态） #

直接给投票按钮添加初始禁用属性：

<button id="Btn" onclick="pushData();" disabled>投票</button>

修改后即可满足需求：页面加载时投票按钮默认禁用，年龄输入小于18时按钮保持禁用且点击不会存入数据，年龄≥18时按钮自动启用，点击后数据正常存入数组。

内容的提问来源于stack exchange，提问作者Chris Van Gewden