How to replace onClick() method in html in this code with alternative in JS?-CodePudding

I want to change onClick method in button in HTML with something other to not use onClick. I found on internet, addEventListener, but not sure how to replace here? Below are my code:

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>

CodePudding user response：

Set the first parameter of addEventListener to 'click' and the second to the function:

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>