Quiero cambiar el método onClick en el botón en HTML con algo diferente para no usar onClick. Encontré en Internet, addEventListener, pero no estoy seguro de cómo reemplazarlo aquí. A continuación se muestra mi código:
function leapYear() { let input = document.getElementById("year"); let year = parseInt(input.value); console.log(year); let output = document.getElementById("output"); year = (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); output.innerHTML = 'Year ' + year + '. is' + (year ? '' : ' not') + ' leap year.'; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Leap Years</h1> <p>Type a year:</p> <div> <input id="year" type="text" size="24" /> <button onclick="leapYear()">Check leap year</button> <br /> <span id="output"></span> </div> <script src="LeapYear.js"></script> </body> </html>Establezca el primer parámetro de addEventListener en 'click' y el segundo en la función:
function leapYear() { let input = document.getElementById("year"); let year = parseInt(input.value); console.log(year); let output = document.getElementById("output"); year = (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); output.innerHTML = 'Year ' + year + '. is' + (year && !isNaN(input.value) ? '' : ' not') + ' leap year.'; } const button = document.querySelector('button'); button.addEventListener('click', leapYear) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Leap Years</h1> <p>Type a year:</p> <div> <input id="year" type="text" size="24" /> <button>Check leap year</button> <br /> <span id="output"></span> </div> <script src="LeapYear.js"></script> </body> </html>