Почему не срабатывает обработчик ->el.addEventListener(“click”, part2);

YR11

$("#liver").click(function() {
  $("#organs").hide();
  var childs = $("#part_1").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'visible';
  }
  $("#part_1").siblings("#continue").css("visibility", "visible");
});

function part2() {
  var childs = $("#part_1").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'hidden';
  }
  $("#part_2").children().css("visibility", "visible")
};

function part3() {
  var childs = $("#part_2").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'hidden';
  }
  $("#part_3").children().css("visibility", "visible")
};

var el = getElementById('continue');
el.addEventListener("click", part2);
el.addEventListener("click", part3);
.issues_for_liver>.child {
  visibility: hidden;
}

.issues_for_liver>#continue {
  visibility: hidden;
}
<div id="organs">
  <button id="liver"> Печень </button>
</div>

<div id="issues">
  <div class="issues_for_liver">

    <div id="part_1" class="child">
      
      <label for="liver_1" class="liver_1">если у вас болит печень 1</label>
    </div>
    <div id="part_2" class="child">
      
      <label for="liver_2" class="liver_2">если у вас болит печень 2</label>
    </div>
    <div id="part_3" class="child">
      
      <label for="liver_3" class="liver_3">если у вас болит печень 3</label>
    </div>

    <button id="continue">Продолжить</button>
  </div>
</div>
2 ответа

YR11

В вашем JavaScript коде немного модернизировал строку:

var el = getElementById('continue');

добавил осмысленное document к методу getElementById:

var el = document.getElementById('continue');

Для демонстрации того, что методы вызваны, добавил два console.log. Самое простое и удобное решение, для того, чтобы узнать, какой блок кода отработал и где.

Вот ваш код, внутри которого оба метода, соответственно и addEventListener срабатывают:

$("#liver").click(function() {
  $("#organs").hide();
  var childs = $("#part_1").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'visible';
  }
  $("#part_1").siblings("#continue").css("visibility", "visible");
});

function part2() {
  console.log('part2');
  var childs = $("#part_1").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'hidden';
  }
  $("#part_2").children().css("visibility", "visible");

  var el = document.getElementById('continue');
  el.removeEventListener("click", part2);
  el.addEventListener("click", part3);
};

function part3() {
  console.log('part3');
  var childs = $("#part_2").children();
  for (var index = 0; index < childs.length; index++) {
    childs[index].style.visibility = 'hidden';
  }
  $("#part_3").children().css("visibility", "visible")
};

var el = document.getElementById('continue');
el.addEventListener("click", part2);
.issues_for_liver>.child {
  visibility: hidden;
}

.issues_for_liver>#continue {
  visibility: hidden;
}
<div id="organs">
  <button id="liver"> Печень </button>
</div>

<div id="issues">
  <div class="issues_for_liver">

    <div id="part_1" class="child">
      
      <label for="liver_1" class="liver_1">если у вас болит печень 1</label>
    </div>
    <div id="part_2" class="child">
      
      <label for="liver_2" class="liver_2">если у вас болит печень 2</label>
    </div>
    <div id="part_3" class="child">
      
      <label for="liver_3" class="liver_3">если у вас болит печень 3</label>
    </div>

    <button id="continue">Продолжить</button>
  </div>
</div>

Оба обработчика отрабатывают, причем в той последовательности, в которой они добавлены:

el.addEventListener("click", part2);
el.addEventListener("click", part3);

Что происходит в part2:

  1. Скрываем все, что есть в блоке part_1;
  2. Отображаем всех детей блока part_2.

Что происходит в part3:

  1. Скрываем все, что есть в блоке part_2;
  2. Отображаем всех детей блока part_3.

Что получается: жмем кнопку Печень, видим блок part_1, нажимаем кнопку продолжить, отрабатывают обе функции, по очереди и в результате мы видим блок part_3.


YR11

Ваша проблема в том, что вы регистрируете несколько одинаковых слушателей события.

el.addEventListener("click", part2);
el.addEventListener("click", part3);

В таком случае дублирующиеся слушатели игнорируются.

licensed under cc by-sa 3.0 with attribution.