Actualiza una interfaz desde su estado

La idea clave

El estado es un dato que puede cambiar, como el número de clics. Puedes separar la operación de actualizar ese dato de la operación de mostrarlo.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

let contador = 0;
function mostrar() {
  document.querySelector('#saludo').textContent = 'Clics: ' + contador;
}
document.querySelector('#accion').addEventListener('click', () => {
  contador = contador + 1;
  mostrar();
});
mostrar();

Editar y probar este mismo ejemplo ↓

1. contador comienza en cero.
2. mostrar lee ese dato y lo coloca en la página.
3. Cada clic aumenta contador y vuelve a llamar a mostrar.

Practica con código

Antes de empezar, piensa: ¿Qué número aparece antes del primer clic?

Cambia el aumento para que cada clic sume 2. Pulsa tres veces.