I have a counter (up to 5) with Increment and Decrement Buttons the Thing is that When the maximum Limit of 5 is reached and I click the Decrement Button (minus Button) instead of going Down to 4 it goes up to 6 and After that it decrements Properly and this is the Same issue with the Increment Button. So can anyone tell why this is happening and How to resolve it?
Any help is Highly Appreciated.
let increment = document.querySelector('.increment')
let decrement = document.querySelector('.decrement')
let text = document.querySelector('.text')
let addedAmount = document.querySelector('.added-amount')
let value = 1
function incre() {
if (value <= 5) {
let holder = value++
text.innerText = holder
let updatedEth = 0.25 * holder
addedAmount.innerText = updatedEth
} else {
alert('You can not take More than Five NFTs')
}
}
function decre() {
if (value >= 1) {
let holder = value--
text.innerText = holder
console.log(addedAmount.innerText - 0.25)
let minusedAmount = addedAmount.innerText - 0.25
addedAmount.innerText = minusedAmount
} else {
alert('you can not')
}
}<div>
<button class="decrement" onclick="decre()">-</button>
<p class="text">0</p>
<button class="Increment" onclick="incre()">+</button>
</div>
<div>
<p><span class="added-amount"> 0.25 </span> eth</p>
</div>You need to use the prefix operator to appear the result on click, also make the value as 0 in initialization otherwise the first value will be 2. you could remove the holder variable in this use case.
let increment = document.querySelector('.increment')
let decrement = document.querySelector('.decrement')
let text = document.querySelector('.text')
let addedAmount = document.querySelector('.added-amount')
let value = 0
function incre(){
if(value < 5){
text.innerText = ++value
let updatedEth = 0.25 * value
addedAmount.innerText = updatedEth
}else{
alert('You can not take More than Five NFTs')
}
}
function decre(){
if(value > 0){
text.innerText = --value
console.log(addedAmount.innerText - 0.25)
let minusedAmount = addedAmount.innerText - 0.25
addedAmount.innerText = minusedAmount
}else{
alert('you can not')
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button class="decrement" onclick="decre()">
-
</button>
<p class="text">0</p>
<button class="Increment" onclick="incre()">
+
</button>
</div>
<div>
<p> <span class="added-amount"> 0.25 </span> eth</p>
</div>
</body>
</html>Instead of pre/post decrementing the value, you can simply do text.innerText = holder-1; and then decrease value by 1.
let increment = document.querySelector('.increment')
let decrement = document.querySelector('.decrement')
let text = document.querySelector('.text')
let addedAmount = document.querySelector('.added-amount')
let value = 1
function incre(){
if(value <= 5){
let holder = value++
text.innerText = holder
let updatedEth = 0.25 * holder
addedAmount.innerText = updatedEth
}else{
alert('You can not take More than Five NFTs')
}
}
function decre(){
if(value >= 1){
let holder = value;
text.innerText = holder-1;
value -= 1;
console.log(addedAmount.innerText - 0.25)
let minusedAmount = addedAmount.innerText - 0.25
addedAmount.innerText = minusedAmount
}else{
alert('you can not')
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button class="decrement" onclick="decre()">
-
</button>
<p class="text">0</p>
<button class="Increment" onclick="incre()">
+
</button>
</div>
<div>
<p> <span class="added-amount"> 0.25 </span> eth</p>
</div>
</body>
</html>