3

tengo problemas para el contador que he realizado en JavaScript cuando pulso el botón. He intentado varias soluciones, pero no sé porqué el contador no me lo hace bien.

let botones = document.querySelectorAll(".btn");
let valor = document.querySelector("#valor");
let contador = 0;

for (let i = 0; i < botones.length; i++) {

  botones[i].addEventListener("click", () => {

    if (botones[i].classList.contains("disminuir")) {

      console.log(valor.innerText = contador--);

    } else if (botones[i].classList.contains("incrementar")) {

      console.log(valor.innerText = contador++);


    } else {

      console.log(valor.innerText = 0);
    }
  })
}
<body>
  <main>
    <article id="contenedor_principal">
      <h1>Contador</h1>
      <p id="valor">0</p>
      <div id="botones"> <button class="btn disminuir" type="button">Disminuir</button> <button class="btn resetear" type="button">Resetear</button> <button class="btn incrementar" type="button">Incrementar</button> </div>
    </article>
  </main>
  <script src="./contador.js"></script>
</body>

Un saludo y gracias!!!

7
  • <body> <main> <article id="contenedor_principal"> <h1>Contador</h1> <p id="valor">0</p> <div id="botones"> <button class="btn disminuir" type="button">Disminuir</button> <button class="btn resetear" type="button">Resetear</button> <button class="btn incrementar" type="button">Incrementar</button> </div> </article> </main> <script src="./contador.js"></script> </body>
    – Pablo FC
    el 17 mar. 2022 a las 10:49
  • 2
    Te he editado la pregunta porque as puesto el html en un comentario. el 17 mar. 2022 a las 10:56
  • Si, porque me decía que no me dejaba poner tanto código en la publicación
    – Pablo FC
    el 17 mar. 2022 a las 10:57
  • 1
    Para estos casos tienes que tomar la opción de añadir el código con el snippet apropiado. Te he editado la pregunta y ahora verás que incluso se puede verificar tu código con un simple click el 17 mar. 2022 a las 11:28
  • 1
    si no dices el comportamiento esperado y su diferencia con el comportamiento actual, la verdad es que "no lo hace bien" suena a que tenemos que interpretar más que ayudarte a debuggear
    – ffflabs
    el 17 mar. 2022 a las 12:17

1 respuesta 1

4

Problema

Aparentemente alguna de las asignaciones a la variable dentro de otra asignación da problemas, por ejemplo en la línea

console.log(valor.innerText=0);

Estás asignando el valor 0 al TEXTO del contador, pero no estás modificando la variable.

A su vez, escribir esto:

valor.innerText=contador++;

De acuerdo a la documentación de MDN (mencionado por Marcos en el comentario) cita lo siguiente:

Operador unario. Agrega uno a su operando. Si se usa como operador prefijo (++x), devuelve el valor de su operando después de agregar uno; si se usa como operador sufijo (x++), devuelve el valor de su operando antes de agregar uno.

Probablemente (por el comportamiento, no estoy seguro a ciencia cierta ya que nunca escribo con esa sintaxis) primero asigna el valor a contador, y luego lo incrementa, por eso a veces necesitás hacer dos clics para ver el cambio.

Separando la modificación del contador de la renderización del valor, se resuelve el problema.

Código

    let botones=document.querySelectorAll(".btn");
    let valor=document.querySelector("#valor");
    let contador=0;
    
    for(let i=0; i<botones.length;i++){
        botones[i].addEventListener("click", ()=>{
            if(botones[i].classList.contains("disminuir")){
                contador--;
            }else if(botones[i].classList.contains("incrementar")){
               contador++;
            }else{
                contador=0;
            }
            console.log(contador);
            valor.innerText=contador;
        })
    }
<body> <main> <article id="contenedor_principal"> <h1>Contador</h1> <p id="valor">0</p> <div id="botones"> <button class="btn disminuir" type="button">Disminuir</button> <button class="btn resetear" type="button">Resetear</button> <button class="btn incrementar" type="button">Incrementar</button> </div> </article> </main> <script src="./contador.js"></script> </body>

6
  • Con respecto al operador ++ (incremento), no funciona igual que x=x+1 mas info acá
    – Marcos
    el 17 mar. 2022 a las 11:33
  • ¡Muchas gracias! lo añadiré a la respuesta. el 17 mar. 2022 a las 11:40
  • @Marcos ¿por qué si el operador unario retorna luego de incrementar, y luego las asignaciones compuestas se evalúan de derecha a izquierda, se tiene ese problema? Un poco de debug y se ve que primero asigna y luego incrementa. el 17 mar. 2022 a las 11:48
  • 2
    Es que así se supone que debe funcionar, ese es el comportamiento esperado. Si te fijas en la documentación dice: "Si x es 3, [...] mientras que x++ devuelve 3 y , solo entonces, establece x en 4.". El uso normal es solo para incrementar (x++;). Se puede usar para asignar e incrementar pero se presta a error porque algunos no tienen en cuenta su comportamiento (como ya vimos)
    – Marcos
    el 17 mar. 2022 a las 11:50
  • Otra forma de verlo (si se quiere) sería z = x++; es quivalente a (z = x), x += 1;. Pensalo como asignar a z el valor actual de x y despues incrementar x
    – Marcos
    el 17 mar. 2022 a las 12:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.