Estimados colegas tengo un problema al tratar de ejecutar un html5 que he creado y es que el navegador me dice que la función que uso no está definida cuando yo si la he definido podeis ayudarme? Concretamente me pasa con la función "parar" pero me temo que con las demás pasará lo mismo.
El código es el siguiente:
<!DOCTYPE html />
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejercicio</title>
<link href="Styles/Estilos.css" rel="stylesheet" />
<script type="text/javascript">
//parar la animación: propiedad animation-play-state: paused;
function parar()
{
avioneta.style.animation-play-state = "paused";
avioneta.style.moz-animation-play-state = "paused";
avioneta.style.webkit-animation-play-state = "paused";
}
//reiniciar la animación: propiedad animation-play-state: running;
function seguir()
{
avioneta.style.animation-play-state = "running";
avioneta.style.moz-animation-play-state = "running";
avioneta.style.webkit-animation-play-state = "running";
}
//Cambiar la velocidad: propiedad animation-duration: "num"
function velocidad(num)
{
valor = num + "s";
avioneta.style.animation-duration = valor;
avioneta.style.moz-animation-duration = valor;
avioneta.style.webkit-animation-duration = valor;
}
//Buscamos el elemento animado en el DOM.
window.onload = function ()
{
avioneta = document.getElementById("avion");
}
</script>
</head>
<body>
<article>
<h2>Avión volando:</h2>
<p>
<input type="button" id="stop" value="stop" onclick="parar()" />
<input type="button" id="play" value="play" onclick="seguir()" />
<b>Elige la velocidad:</b>
<select id="vel">
<option selected="selected" onclick="velocidad(4)">Normal</option>
<option onclick="velocidad(10)">Muy lento</option>
<option onclick="velocidad(8)">Lento</option>
<option onclick="velocidad(2)">Rápido</option>
<option onclick="velocidad(1)">Muy Rápido</option>
</select>
</p>
<div id="visor">
<img id="playa" src="Imagenes/Playa.jpg" alt="playa">
<img id="avion" src="Imagenes/Avion.png" alt="avion">
</div>
</article>
</body>
</html>