开发公历闰年判断程序时JavaScript无法获取HTML Input值的问题排查

嘿，我帮你找出代码里的几个关键问题，这就是你为啥拿不到输入框值的原因：

1. 脚本跑太早了！ #

你把<script>放在了<head>里，这时候浏览器还没来得及渲染<body>里的输入框呢。页面加载时执行document.getElementById("year").value，要么得到undefined，甚至直接报错——因为这时候getElementById根本找不到元素，返回的是null，你访问null.value肯定要出问题。

2. 函数调用和参数传递错配 #

• 你按钮的onClick写的是checkLeapYear()，没传任何参数，但你的函数定义是需要接收year参数的，这时候函数里的year会变成undefined。
• 就算你一开始拿到了year变量，那也是页面刚加载时输入框的空值，点击按钮的时候不会自动去取最新的输入内容啊！

3. 字符串没转数字（隐藏坑） #

输入框的value默认是字符串类型，虽然有时候字符串做取模运算能凑合用，但万一用户输入了非数字内容，或者带前导零的数字，结果就会乱套，最好显式转成数字更稳妥。

HTML 部分 #

把脚本移到</body>结束前，确保DOM元素都渲染完再执行JS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leap Year Checker</title>
</head>
<body>
  Enter a year: <input type="text" id="year">
  <input type="button" id="button" onClick="checkLeapYear()" value="Check Leap Year">

  <!-- 脚本移到这里，确保DOM已加载 -->
  <script src="script.js"></script>
</body>
</html>

JavaScript 部分 #

调整函数逻辑，在点击按钮时才去拿最新的输入值，还要加个输入验证：

function checkLeapYear() {
  // 点击按钮时才获取输入框的当前值，转成整数
  const yearInput = document.getElementById("year");
  const year = parseInt(yearInput.value, 10);

  // 先检查输入是不是有效的数字
  if (isNaN(year)) {
    console.log("请输入有效的数字哦！");
    return;
  }

  // 闰年判断逻辑保持不变，用===更严谨
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    console.log(`${year} 是闰年`);
  } else {
    console.log(`${year} 不是闰年`);
  }
}

• 用parseInt的时候加上第二个参数10，是为了确保字符串按照十进制转成数字，避免像"02024"这种被当成八进制处理的问题。
• 加个输入验证能避免用户乱输入导致的奇怪报错，体验更好～

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