Jquery при нажатии возвращает значение и использует его в другой функции

Question

Я пытаюсь вычислить inc и получить возвращаемое значение, чтобы использовать его позже. Я беру значение из двух функций. Функции на самом деле работают, и если я console.log(inc) это в функции, я получаю напечатанное значение. Но если я делаю это снаружи, как вы можете видеть в коде, я просто получаю 0, или, скорее, ничего не происходит. Как я могу вернуть значение и использовать его позже в своем коде?

Значение inc, которое я получаю от нажатых кнопок + и -. Если кнопки нажимаются, они идут вверх или вниз на число в диапазоне от -3 до 3.

var zoomIn = $('.s-plus');
var zoomOut = $('.s-minus');
var inc = 0;

zoomIn.on('click', function positive() {
  inc = inc + 1;
  if (inc > 3) {
    return inc = inc - 1;
  }
})

zoomOut.on('click', function negative() {
  inc = inc - 1;
  if (inc < -3) {
    return inc = inc + 1;
  }
})

console.log(inc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-magnifier-container magnify">
  <div class="zoom">
    <span class="s s-plus"><span class="hide">zoom-in</span></span>
    <span class="s s-minus"><span class="hide">zoom-out</span></span>
  </div>
</div>

Answer 1

Ваш код на самом деле в порядке. Однако console.log() вызывается только один раз при инициализации. Если вы хотите увидеть изменение, переместите console.log() (или любую функцию, которая должна реагировать на изменение) в обработчики событий.

var zoomIn = $('.s-plus')
var zoomOut = $('.s-minus')
var resize = $('.resize')
var inc = 0

zoomIn.on('click', function positive() {
  inc = inc + 1;
  if (inc > 3) {
    inc = 3;
  }
  
  console.log(inc);
})

zoomOut.on('click', function negative() {
  inc = inc - 1;
  if (inc < -3) {
    inc = -3;
  }
  
  console.log(inc);
})

resize.on('click', function() {
  console.log(inc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-magnifier-container magnify">
  <div class="zoom">
    <span class="s s-plus"><span class="hide">zoom-in</span></span>
    <span class="s s-minus"><span class="hide">zoom-out</span></span>
  </div>
  
  <button class="resize">Resize</button>
</div>