Блог

Главная - Вопросы по программированию - Как заменить метод onClick() в html в этом коде альтернативой в JS?

Как заменить метод onClick() в html в этом коде альтернативой в JS?

#javascript #html

Вопрос:

Я хочу изменить метод onClick в кнопке в HTML с помощью чего-то другого, чтобы не использовать onClick. Я нашел в Интернете addEventListener, но не уверен, как его заменить здесь? Ниже приведен мой код:

 function leapYear() {
    let input = document.getElementById("year");
    let year = parseInt(input.value);
    console.log(year);
    let output = document.getElementById("output");
    

    year = (year % 4 == 0) amp;amp; (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>

Ответ №1:

Установите первый параметр addEventListener в 'click' , а второй в функцию:

 function leapYear() {
    let input = document.getElementById("year");
    let year = parseInt(input.value);
    console.log(year);
    let output = document.getElementById("output");
    

    year = (year % 4 == 0) amp;amp; (year % 100 != 0 || year % 400 == 0);
    output.innerHTML = 'Year '   year   '. is'   (year amp;amp; !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>

Комментарии:

1. @MAlex Лучше создать новый вопрос для другого вопроса. Держите все вопросы простыми.

Метки: