My problem is that I have a variable to which I need to increase its value with each click, but in my code, it does not increase but remains with the same value ... I come to the conclusion that it recognizes it as a single event so it does not update the value of the variable, but nevertheless try with e.stopPropagation() and other methods. Next I will try to reproduce the error:
$(".zoomContainner button").click(function(e) {
e.stopPropagation();
var action = $(this).attr("class");
var zoomSelectorCount = 0;
var zoomSelector = {
0: 0,
1: 25,
2: 50,
3: 75,
4: 100
}
if (action == "zoomIn") {
zoomSelectorCount++;
console.log(zoomSelectorCount);
}else if (action == "zoomOut") {
zoomSelectorCount--;
console.log(zoomSelectorCount);
}
});* {
margin: 0;
padding: 0;
}
body {
height: 300px;
}
.zoomContainner {
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.zoomTool {
background-color: #212121c2!important;
padding: 2px;
border-radius: 2px;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.zoomTool button {
background-color: transparent;
outline: none;
border: none;
height: 40px;
width: 40px;
border-radius: 2px;
transition: .2s;
cursor: pointer;
}
.zoomTool button:hover {
background-color: rgba(209, 209, 209, 0.53);
}
.zoomTool button i {
color: white;
font-size: 20px;
}
.zoomReset {
margin: 0 1px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zoomContainner">
<div class="zoomTool">
<button class="zoomOut" type="button" name="button"><i class="fas fa-minus"></i></button>
<button class="zoomReset" type="button" name="button"><i class="fas fa-search-minus"></i></button>
<button class="zoomIn" type="button" name="button"><i class="fas fa-plus"></i></button>
</div>
</div>I find that when I run the code, when I decrease the value of the variable it results in -1 and when the increase returns 1 .
Is there another logic that I can follow to arrive at the desired result? Thank you.