如何在现有闰年检测代码中用JS方案替代HTML的onClick()点击方法

修改方案 #

1. 调整HTML代码 #

删除<button>标签上的onclick="leapYear()"内嵌属性，给按钮新增id用于JS选中，修改后按钮代码如下：

<button id="checkBtn">Check leap year</button>

其余HTML代码无需改动。

2. 调整LeapYear.js代码 #

保留原有闰年判断逻辑，新增事件绑定代码即可，同时修复原代码中年份输出会显示true/false的问题，修改后完整JS代码如下：

function leapYear() {
    let input = document.getElementById("year");
    let year = parseInt(input.value);
    console.log(year);
    let output = document.getElementById("output");
    
    // 单独存储闰年判断结果，不覆盖原年份数值，避免输出异常
    let isLeap = (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
    output.innerHTML = 'Year ' + year + ' is' + (isLeap ? '' : ' not') + ' leap year.';
}

// 绑定按钮点击事件
const checkBtn = document.getElementById('checkBtn');
checkBtn.addEventListener('click', leapYear);

// 可选优化：输入框按回车也可触发校验，提升使用体验
document.getElementById('year').addEventListener('keydown', e => {
    if(e.key === 'Enter') leapYear();
});

实现说明 #

你的script标签放在body末尾，加载JS时页面DOM已经渲染完成，直接获取按钮元素绑定事件不会出现找不到元素的异常，无需额外加DOM加载完成的监听逻辑。

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