0

js_ovn_func.html

<!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>Func_example</title>
</head>
<body>
    <button id = "addition">Click me to +</button>
    <button id = "subtraction">Click me to -</button>
    <button id = "multiplication">Click me to /</button>
    <button id = "division">Click me to *</button>
    <div id="result"></div>
    <script src="js_ovn_func.js"></script>
</body>
</html>

js_ovn_func.js

var a = 4;
var b = 7;
function countResult(a, b, operation) {
  if (operation == "+") {
    document.getElementById("result").innerHTML = a + b;
  } else if (operation == "-") {
    document.getElementById("result").innerHTML = a - b;
  } else if (operation == "*") {
    document.getElementById("result").innerHTML = a * b;
  } else {
    document.getElementById("result").innerHTML = a / b;
  }
}
document.getElementById("addition").addEventListener("click", countResult(5, 5, "+"));
document.getElementById("subtraction").addEventListener("click", countResult(10, 10, "-"));
document.getElementById("addition").addEventListener("click", countResult(5, 5, "*"));
document.getElementById("addition").addEventListener("click", countResult(5, 5, "/"));

Здравствуйте! Почему код выполняется не при клике, а впринцыпе при загрузке? После полной загрузки страницы, функция выполняется для каждой кнопки

2
  • 4
    Потому что в addEventListener засунули не функцию, а резульат вызова этой функции. Выражение countResult(5, 5, "+") запускает функцию и возвращает значение undefined, в итоге получается addEventListener("click", undefined) и в итоге это ничего не делает кроме однократного вызова функции
    – andreymal
    11 фев 2021 в 10:41
  • 1
    @andreymal, думаю, это и есть ответ на вопрос. Не желаете ли оформить его соответствующе? 11 фев 2021 в 10:53

1 ответ 1

3

Вам надо передавать Callback-функцию в addEventListener(), а не вызов функции. То есть в вашем случае надо создать для каждой кнопки свой callback в котором будет вызываться необходимая функция:

// callback for first button
const countResultForFirstButton = () => {
   countResult(5, 5, "+")
}

и уже его передавать в addEventListener('click', countResultForFirstButton). Аналогично для остальных кнопок.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.