36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
const btnSumar = document.querySelector("#sumar");
|
|
const btnRestar = document.querySelector("#restar");
|
|
|
|
function actualizarVista(valor) {
|
|
const MIN = 0;
|
|
const MAX = 10;
|
|
const parrafo = document.querySelector("#contador");
|
|
parrafo.textContent = valor;
|
|
|
|
// Habilitamos o deshabilitamos los botones según el valor actual.
|
|
// Cuando disabled es true, el botón no responde a clics.
|
|
btnSumar.disabled = valor === MAX;
|
|
btnRestar.disabled = valor === MIN;
|
|
}
|
|
|
|
btnSumar.addEventListener("click", () => {
|
|
// Obtenermos el valor actual
|
|
let valor = parseInt(document.querySelector('#contador').textContent);
|
|
// Sumamos 1
|
|
valor++;
|
|
// y actualizamos la vista
|
|
actualizarVista(valor);
|
|
});
|
|
|
|
btnRestar.addEventListener("click", () => {
|
|
// Obtenermos el valor actual
|
|
let valor = parseInt(document.querySelector('#contador').textContent);
|
|
// Restamos 1
|
|
valor--;
|
|
// y actualizamos la vista
|
|
actualizarVista(valor);
|
|
});
|
|
|
|
// Llamamos a actualizarVista al inicio para establecer el estado inicial en 5.
|
|
actualizarVista(5);
|