如何提交年份至JavaScript实现闰年判断及编程学习动力建议

一、修复闰年判断功能，获取用户输入值 #

原代码存在的问题 #

1. 脚本加载时机错误：<script>放在<head>中，页面未渲染完成就获取DOM元素，会拿到空值
2. 获取输入值时机过早：页面加载时就读取year，此时用户还未输入内容
3. 按钮未绑定触发逻辑：点击Submit按钮不会执行任何判断操作
4. 输入框类型有误：type="numbers"应为type="number"

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Is it leapyear </title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <p> Enter year </p>
  <input type="number" id="leapYear" placeholder="enter a 4 digit year-YYYY" maxlength="4" pattern="\d{4}"/>
  <button type="button" id="submitBtn">Submit</button>
  <!-- 新增结果展示区域 -->
  <p id="result"></p>

  <!-- 脚本移至body末尾，确保DOM渲染完成后执行 -->
  <script src="leapyear.js"></script>
</body>
</html>

JavaScript部分（leapyear.js）

// 给按钮绑定点击事件
document.getElementById('submitBtn').addEventListener('click', function() {
  // 点击时才获取用户输入的年份
  const yearInput = document.getElementById('leapYear');
  const year = parseInt(yearInput.value, 10);

  // 验证输入是否为4位有效数字
  if (isNaN(year) || year < 1000 || year > 9999) {
    document.getElementById('result').textContent = '请输入有效的4位年份！';
    return;
  }

  // 调用判断函数并将结果展示在页面
  const result = isLeapYear(year);
  document.getElementById('result').textContent = result;
});

function isLeapYear(year) {
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    return `${year} 是闰年`;
  } else {
    return `${year} 不是闰年`;
  }
}

修改说明 #

• 脚本移至<body>末尾，确保DOM元素全部渲染完成后再执行JS逻辑
• 为按钮添加点击事件监听，仅在用户触发操作时读取输入值
• 增加输入验证，避免无效值传入判断函数
• 将判断结果展示在页面（替代控制台打印），提升用户体验
• 修正输入框type属性为number，符合HTML规范

二、保持编程学习动力的实用建议 #

• 从小项目入手：别一开始就啃复杂框架，先做「闰年判断」「待办清单」这类轻量功能，完成后能获得实打实的成就感
• 记录学习轨迹：每天写两行学习笔记，或把完成的小项目存档，过段时间回头看，能直观看到自己的进步，比空泛的努力更有说服力
• 接受犯错的常态：编程就是不断试错的过程，遇到bug别崩溃，把它当成「发现知识点盲区」的机会，解决后就多掌握了一项技能
• 拆分学习任务：把大目标拆成细碎的小任务，比如今天只学「DOM事件绑定」，明天学「输入验证」，每完成一个小任务就给自己一点小奖励（比如喝杯奶茶、刷10分钟短视频）
• 找同好抱团：加入本地编程社群或线上讨论组，遇到问题可以求助，也能看到别人的学习进度，互相打气比独自闷头学更容易坚持

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