JavaScript中的值是遞增而不是遞減？-有解無憂

我有一個帶有增量和減量按鈕的計數器（最多 5 個），事情是當達到 5 的最大限制時，我單擊減量按鈕（減號按鈕）而不是下降到 4，它上升到 6，然后它正確遞減，這與增量按鈕相同。那么任何人都可以說出為什么會發生這種情況以及如何解決它？

任何幫助都受到高度贊賞。

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>

uj5u.com熱心網友回復：

您需要使用前綴運算子在單擊時顯示結果，還要在初始化時將值設為 0，否則第一個值為 2。您可以在此用例中洗掉 holder 變數。

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>

uj5u.com熱心網友回復：

text.innerText = holder-1;您可以簡單地執行然后減少1 ，而不是預先/后減少值value。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419169.html

標籤：

上一篇：如何減少差距原因<br>

下一篇：如何在CSS中創建無限文本尾部？