addEventListener проблема

Question

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, "/"));

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

Answer 1

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

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

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

БЛОГ НА HUSL

addEventListener проблема

Ответы (1 шт):