<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aprender la tabla de multiplicar</title>
<script>
function validar()
{
// Obtenemos los valores del formulario
var numero1=document.getElementById("numero1").value;
var numero2=document.getElementById("numero2").value;
var resultado=document.getElementById("resultado").value;
var respuesta=document.getElementById("respuesta");
// Verificamos que se haya introducido numeros
if(isNumber(numero1) && isNumber(numero2) && isNumber(resultado))
{
if(parseInt(resultado)==parseInt(numero1)*parseInt(numero2))
{
respuesta.style.color="#000000";
respuesta.innerHTML="El resultado es correcto";
}else{
respuesta.style.color="#ff0000";
respuesta.innerHTML="El resultado es incorrecto";
}
}else{
respuesta.style.color="#ff0000";
respuesta.innerHTML="Tienes que rellenar todos los campos, y tienen que ser numericos";
}
return false;
}
// Funcion que determina si el valor es o no numerico
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<style>
input[type=text] {width:50px;border:1px solid #ccc;}
</style>
</head>
<body>
<h1>Aprender la tabla de multiplicar</h1>
<form>
<input type="text" id="numero1"> x
<input type="text" id="numero2"> =
<input type="text" id="resultado">
<input type="submit" value="Validar" onclick="return validar()">
</form>
<div id="respuesta"></div>
<p><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>