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.