Intento hacer un contador sencillo, consigo sumar y resta el contador fácilmente y se mantiene el valor constantemente (Lo compruebo con usar console.log), pero no puedo imprimirlo en pantalla.
Quiero hacer que la etiqueta
cambie conforme el valor que se muestra en el console.log pero no funciona.
//Llamo el valor del <p>
let cantidadMochila = document.getElementById('cantidad-mochilla').textContent;
//Llamo los botones del contador
//Uno para sumar y otro para restar
const menosMochilas = document.getElementById('menos-mochila');
const masMochilas = document.getElementById('mas-mochila');
//Coloco eventListerner llamando a una funcion para sumar/restar
menosMochilas.addEventListener('click', restarMochilas)
masMochilas.addEventListener('click', sumarMochilas)
//Funcion Restar
function restarMochilas () {
cantidadMochila.innerhtml = cantidadMochila--
console.log(cantidadMochila) //Devuelve el valor adecuado (restado)
}
//Funcion Sumar
function sumarMochilas () {
cantidadMochila.innerhtml = cantidadMochila++
console.log(cantidadMochila)//Devuelve el valor adecuado (sumado)
}
//La etiqueta <p> no cambia, pero el console.log indica que funciona como debería.
<div class="counter">
<button id="menos-mochila" class="counter__btn btn__menos">-</button>
<!-- El <p> es el que debería cambiar --->
<p id="cantidad-mochilla" class="counter__p">1</p>
<button id="mas-mochila" class="counter__btn btn__mas">+</button>
</div>