Ejercicio

Vamos a crear una web que nos pida dos números y nos muestre en un h1 la suma entre el primero y el último.

Numero1: [___] NUmero2: [____]
[Calcular]
La suma es…

Hacedlo con el evento click del botón pero podéis probar a hacerlo con el change de los inputs.

	<div id="contenedor" class="container ">
		<div class="form-group">
			<label for="num1">Número 1:</label>
			<input type="text" class="form-control" maxlength="10" id="num1" placeholder="Introduce un número">
			<p id="mensaje"></p>
			<label for="num2">Número 2:</label>
			<input type="text" class="form-control" id="num2" placeholder="Introduce un número">
		</div>

		<button id="sumar">Sumar</button>
		<div id="resultados">
		</div>
		<script src="js/test.js"></script>
	</div>

// Capturo el evento click del botón
document.getElementById('sumar').addEventListener('click', sumar)

// Capturo el evento change de los inputs
document.getElementById('num1').addEventListener('change', sumar)
document.getElementById('num2').addEventListener('change', sumar)

// Capturo el evento keyup
document.getElementById('num1').addEventListener('keyup', comprobar)

function sumar () {
  // Recupero los valores de los números
  const num1 = parseFloat(document.getElementById('num1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  // Los sumo
  const suma = num1 + num2
  // Si el resultado es un número, o lo que es lo mismo 'no es cierto que no es un número'
  if (!isNaN(suma)) {
    // Creo un párrafo
    const parrafo = document.createElement('p')
    // Le pongo un texto
    parrafo.innerHTML = 'El resultado es: ' + suma
    // Lo añado al div 'resultados'
    document.getElementById('resultados').appendChild(parrafo)
  }
}

function comprobar () {
  const cadena = document.getElementById('num1').value
  if (cadena.length == 10) {
    document.getElementById('mensaje').innerHTML = 'No puedes escribir más'
  } else {
    document.getElementById('mensaje').innerHTML = ''
  }
}