Почему не срабатывает JS-скрипт?

209

12 декабря 2018, 14:20

Суть: нужно словить шестой клик по кнопке (".cltr-button-next"), и привязать к нему действие: захватываем блок с класссом .lp-hero, у которого убираем класс .vib-size-midle и вместо него добавлем .vib-size-result

Вроде бы как несложно, но у меня почему-то не срабатывает.

$(document).ready(function(){
function lastClick(){
  var iter = 0;
  var clCounter = document.querySelector(".cltr-button-next");
  clCounter.addEventListener("click", function(){
    if(++iter == 6) {
      $('.lp-hero').removeClass('vib-size-midle');
      $('.lp-hero').addClass('vib-size-result');
    }
  });
};
lastClick();
});

Answer 1

$(document).ready(function(){ 
  var iter = 0; 
  $(".cltr-button-next").on("click", function(){ 
    if(++iter == 6) { 
      alert('click '+iter); 
      $('.lp-hero').removeClass('vib-size-midle'); 
      $('.lp-hero').addClass('vib-size-result'); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="lp-hero vib-size-midle">ipHero</div> 
<button class="cltr-button-next">cltr-button-next</button>

Answer 2

Опечатка в названии класса cltr-button-next, нужно ctrl-button-next. Ошибка в консоли браузера.