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

Question

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>

Spectric · Accepted Answer · 2021-09-24 03:07:27Z

3

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>

edited Sep 24, 2021 at 3:07

answered Sep 24, 2021 at 3:02

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammedogz Over a year ago

@MAlex It is better to create new question for another question. Keep all question in simple.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related