0

digamos que en mi archivo html tengo un número, y quiero que al pulsar un botón ese número aumente(1, 2,...) y se muestre en el navegador y al pulsar otro disminuya (sin llegar a ser menor que 0). ¿Cómo se haría esto?.

Esto es lo que he intentado:

    <script>
            var items = 0;
            function increaseItem(){
              items++;
              document.getElementById("quantity").write(items);
            }
    </script>
<input onclick="increaseItem()" type="button" value="+" id="+ button"></input>
<h1 id="quantity"><script type="text/javascript">document.write(items);</script></h1>

Sé que puede ser una pregunta tonta pero actualmente estoy aprendiendo desarrollo web y no he conseguido hacerlo. Gracias de antemano.

2 respuestas 2

1

ten en cuenta que el metodo write hace parte de document y no de HTMLElement, por este motivo la funcion write no es reconocida al momento de hacer:

document.getElementById("quantity").write(items);

Tambien veo que te falta codigo, pues realmente en el codigo nos muestras el input para incremento (+) pero no tienes el de decremento (-), he decidido agregarlo de una vez.

Ahora bien, esto que tienes aqui:

<input onclick="increaseItem()" type="button" value="+" id="+ button"></input>

Es definitivamente una mala practica, y es porque un elemento JAMAS debe tener mas de un ID, en tu caso tratas de tener dos id en un mismo elemento:

id="+ button"

Lo cual por supuesto no solo es erroneo, si no una mala practica, ya que si quieres identificar un elemento de varias formas puedes hacerlo mediante clases:

class="+ button"

Lo cual SI es correcto, ya que un elemento SI puede contener varias clases, tantas como quieras.

Ahora bien, dicho esto, he corregido un poco tu codigo y te muestro de que forma puedes realizarlo, antes de ello decir que.

Existe una propiedad llamada textContent la cual se utiliza para modificar el texto que se le ha puesto a un elemento HTML, asi que en vez de:

document.getElementById("quantity").write(items);

Que era lo que estabas usando, deberias usar:

document.getElementById("quantity").textContent = items;

Muy bien, sin mas que agregar aqui el codigo corregido:

window.onload = ()=>{

  const quantity = document.getElementById("quantity");
  const button_plus = document.getElementById("button+");
  const button_minus = document.getElementById("button-");
  let items = 0;

  function increaseItem() {
    items++;
    quantity.textContent = items;
  }

  function decreaseItem(){
    if(items > 0) items--;
    quantity.textContent = items;
  }
  
  button_plus.addEventListener("click", increaseItem);
  button_minus.addEventListener("click",decreaseItem);

}
<input type="button" value="+" id="button+"></input>
<input type="button" value="-" id="button-"></input>
<h1 id="quantity">0</h1>

Quiza haya algunas cosas que no entiendas de primeras, pero te aconsejo que no le añadas eventos oyentes directamente al HTML.

Esto es debido a que si lo haces de esa manera no podras usar luego encapsulamiento por parte de javascript para que tu codigo no sea directamente modificable en la consola.

Es verdad que hay otras formas de modificarlo, pero si el usuario solo conoce la consola no podra hacerlo mediante la consola.

Cuando hablo de encapsulamiento me refiero a esta parte de aqui:

window.onload = ()=>{

}

Esperamos a que la pagina cargue y los eventos se añaden desde javascript y no desde el HTML.

Tambien en la funcion de decremento tenemos esta pequeña condición:

if(items > 0) items--;

Que en pocas palabras es la que controla que la variable nunca baje de cero, es decir, si la variable items es mayor a cero restale 1 a la variable items. de lo contrario no hagas nada.

1
  • Por cierto, si te ha servido mi respuesta o si tienes alguna duda obviamente puedes preguntarla en los comentarios, en caso de que desees marcar mi respuesta como aceptada puedes hacerlo dandole al boton que parece un chulo al lado de mi respuesta, eso nos dara puntos a ambos.
    – Layer
    el 7 nov. 2020 a las 19:57
0

solo cambie una parte para que entiendas la propiedad textContent , ya con esto podrias hacer el otro input para decrementar y ver que condicional usarias en items para ver o no si lo mostras en el h1

  var items = 0;
            function increaseItem(){
              items++;
              const Incrementa =  document.getElementById("quantity")
              Incrementa.textContent= items;
            }
<input onclick="increaseItem()" type="button" value="+" id="+ button"></input>
<h1 id="quantity">  0 </h1>

Tu Respuesta

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

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