Tengo un contador (hasta 5) con botones de incremento y disminución. La cosa es que cuando se alcanza el límite máximo de 5 y hago clic en el botón de disminución (botón menos) en lugar de bajar a 4, sube a 6 y después de eso. disminuye correctamente y este es el mismo problema con el botón Incrementar. Entonces, ¿alguien puede decir por qué sucede esto y cómo resolverlo?
Cualquier ayuda es muy apreciada.
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>Debe usar el operador de prefijo para que aparezca el resultado al hacer clic, también haga que el valor sea 0 en la inicialización; de lo contrario, el primer valor será 2. En este caso de uso, podría eliminar la variable del titular.
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>En lugar de pre/post disminuir el valor, simplemente puede hacer text.innerText = holder-1; y luego disminuir el value en 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>