1

body {
  background: aquamarine;
  text-align: center;
}
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script>
$('body').on('click', function () {
  function makeCounter() {
    var currentCount = 1;
    return function (){
      return currentCount++;
    };   
  }
 
    var counter = makeCounter();

    alert(counter());
 })
</script>
</body>

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

3
  • 1
    А в чем возникли трудности? 28 дек 2017 в 16:59
  • В чем заключается ваш вопрос?
    – kizoso
    28 дек 2017 в 17:02
  • @Владимир Владимирович конкретно в вашем примере переменная currentCount при каждом вызове makeCounter равна 1. Выносите её определение за функцию.
    – Kirill
    28 дек 2017 в 17:08

4 ответа 4

2

Новый counter создается на каждый клик. Вынесите его создание из обработчика:

function makeCounter() {
  var currentCount = 1;
  return function() {
    return currentCount++;
  };
}
var counter = makeCounter();

$(document).on('click', function() {
  alert(counter());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Без внешних переменных:

$(document).on('click', function() {
  var clickCount = +$(this).data("clickcount");
  if (!clickCount)
    clickCount = 1;

  alert(clickCount++);

  $(this).data("clickcount", clickCount)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2

В описанном вами коде функция инициализируется и назначается в переменную каждый раз при клике на body. Поэтому она просто не может отсчитывать что-то больше 1. Потому что всегда выполняется один и тот же код заново. Чтобы этого не было, вынесите функцию с замыканим наружу, а при клике уже вызывайте.

И еще у вас body не имел высоты, поэтому клик бы все равно не прошел. Для теста, поставьте border в CSS и увидите это сами. А с высотой будет так:

function makeCounter() {
  var currentCount = 1;
  return function() {
    return currentCount++;
  };
}

var counter = makeCounter();


$("body").on("click", function() {
  console.log(counter());
});
body {
  background: aquamarine;
  text-align: center;
  border: 1px solid red;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • вы модифицировали код, в вопросе он не такой. и там есть другие причины чтобы в оригинале он не работал. так что body тут не при делах
    – teran
    28 дек 2017 в 17:35
  • @teran да вы правы. Я дописал. Хотя автору видимо это уже не нужно) 28 дек 2017 в 17:54
2

Мне кажется так проще

var count = 0;
document.body.addEventListener('click', ()=>{
console.log(count++);
})
html,
body {
    width: 100%;
    height: 100%;
}

2
1

var clk = 0;

$(document).on('click', function() {

    clk++;
    
    console.clear();
    console.log(clk);
    
});
body {
  background: aquamarine;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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