Jquery on click return a value and use it in another function

Question

I am trying to calculate the inc and get the value returned so I can use it later . I am taking the value from two funcitons . Functions actually work and if I console.log(inc) it in a function , i get the value printed . But if I do it outside like you can see in the code, I just get 0, or rather , nothing happens. How can I return the value and use it later in my code ?

The value inc , I get from the clicked buttons + and -. If the buttons get clicked , they go up or down a number in range of -3 to 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>

Ori Drori · Accepted Answer · 2019-11-10 14:55:07Z

1

Your code is actually fine. However, the console.log() is only called once on initialisation. If you want to see the change, move the console.log() (or any function that needs to react to the change) to the event handlers.

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>

edited Nov 10, 2019 at 14:55

answered Nov 9, 2019 at 20:50

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bojan Kolano Over a year ago

I did do this before but I actualy need to have another function after these two that uses the value "inc" . I used the console.log just to show that this value needs to be used later. When i click the two buttons now , the value stays at 0 .

Ori Drori Over a year ago

That's why I wrote - "(or any function that needs to react to the change)". Replace console.log() with whatever function needs those value, and the function will be called with the current one.

Bojan Kolano Over a year ago

So I would have to write the same function twice ?

Ori Drori Over a year ago

You would call the same function whenever it needs to know that inc has changed. The other option is to use polling/observer/setter to call the function when inc changes, which is much more difficult.

Bojan Kolano Over a year ago

"You would call the same function whenever it needs to know that inc has changed." this part i don't understand . I need the value of inc because I want to enlarge the picture or make it smaller dependning on the "inc" . So with every click I need to check the value of "inc" . I know that would work if I made two functions but I wanted to avoid repetiton if possible . So the best way would be to write the function twice for both clicks ?

|

Collectives™ on Stack Overflow

Jquery on click return a value and use it in another function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related