1

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>

1 respuesta 1

1

El problema es que estas obteniendo directamente el contenido y el método innerhtml funciona solo en elementos html no en valores, puedes solucionarlo seleccionando solo el elemento y al hacer la suma o resta lo haces con el valor.

let cantidadMochila = document.getElementById('cantidad-mochilla');

console.log(cantidadMochila.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.textContent--
  //console.log(cantidadMochila) //se mostrara el elemento html
}


//Funcion Sumar
function sumarMochilas () {
  cantidadMochila.innerhtml = cantidadMochila.textContent++
  //console.log(cantidadMochila) //se mostrara el elemento html
}
<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>

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.