операция prompt Java Script

У меня такая проблема:
Задано условие, что если число, вводимое пользователем будет меньше 18, то картинка должна скрываться, если больше или равно 18, то должно показываться снова. Но проблема в том, что я ввел число, все работает, но в последующие разы ввода числа, количество prompt увеличивается на 1, т.е приходится отвечать по несколько раз.

В чем причина этого явления?

function hide() {
  var img = document.getElementById('HS');
  addEventListener("click", function() {
    var age = prompt("Укажите возраст: ");
    if (age < 18) {
      img.style.visibility = "hidden";
    } else if (age >= 18) {
      img.style.visibility = "visible";
    }
  });
}
<button id="btn" onclick="hide()">Клик</button> <img style="width: 30px" src="https://i.pinimg.com/originals/3a/49/c1/3a49c13b207c20bdf1fac243a9a8bc6b.png" alt="Error!" id="HS">


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

Автор решения: Александр Сычёв

У вас стоит вызов функции при клике onclick="hide()" . А в функции делаете так addEventListener("click", function() {.... При клике вы уже вызвали функцию

function hide() {
  var img = document.getElementById('HS');
  var age = prompt("Укажите возраст: ");
  if (age < 18) {
    img.style.visibility = "hidden";
  } else if (age >= 18) {
    img.style.visibility = "visible";
  }

}
<button id="btn" onclick="hide()">Клик</button> <img style="width: 30px" src="https://i.pinimg.com/originals/3a/49/c1/3a49c13b207c20bdf1fac243a9a8bc6b.png" alt="Error!" id="HS">

→ Ссылка