The value is Incrementing instead of Decrementing in JavaScript?-CodePudding

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  onclick="decre()">-</button>
  <p >0</p>
  <button  onclick="incre()"> </button>
</div>

<div>
  <p><span > 0.25 </span> eth</p>
</div>

CodePudding user response：

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  onclick="decre()">
      -
    </button>
    
      <p >0</p>
    
 <button  onclick="incre()">
    
 </button>
  </div>
  
  <div>
    <p> <span > 0.25 </span> eth</p>
  </div>
</body>
</html>

CodePudding user response：

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  onclick="decre()">
      -
    </button>
    
      <p >0</p>
    
 <button  onclick="incre()">
    
 </button>
  </div>
  
  <div>
    <p> <span > 0.25 </span> eth</p>
  </div>
</body>
</html>