Ejercicio contador

Versión 1

Cada vez que se pulse el botón hay que incrementar el contador. El botón reiniciar vuelve a poner el contador a 0.

<h1>Contador</h1>
<p id="contador">0</p>
<button>Contar</button>
<button>Reinicio</button>

Solución

// Es una variable global
var cuenta = 0; 

// En el onclick del primer botón
function contar() {         
  cuenta++;
  mostrar();
}

// En el onclick del segundo botón
function reiniciar() {
  cuenta = 0;
  mostrar();
}

// Muestra la variable en la página
function mostrar() {            
  document.querySelector('#contador').innerHTML = cuenta;
}

Versión 2

Ha de mostrar en la pantalla la palabra "vez" si la cuenta es 1 o "veces" si la cuenta no es 1.

Solución

Modificar la función mostrar:

function mostrar() {    
  var contador = document.querySelector('#contador');
  if (cuenta == 1) {
    contador.innerHTML = cuenta + " vez";
  } else {
    contador.innerHTML = cuenta + " veces";
  }
}

Versión 3

Contar automáticamente incrementando en uno cada segundo.

Solución

Al cargar la página web llamar a la función iniciar:

<body onload="iniciar()">

El código es el siguiente:

// Variable global
var cuentame = 0;

function iniciar() {
  // Cada segundo llama a la función mostrar
  setInterval(mostrar, 1000);     
}

function mostrar() {
  cuentame++;
  document.querySelector('#contador').innerHTML = cuentame;
}

Proinf.net