Eventos: mousedown y mouseup

PROBLEMA

  1. Elaborar un programa que muestre un div de color rojo. Cuando se presione cambiar el color a amarillo y luego de soltar el botón del mouse volver a pintar de rojo.
Solución
Problema 1.


<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

  <div style="width:200px;height:200px;background:#ff0000" id="recuadro1">
  </div>

<script>
  addEventListener('DOMContentLoaded',inicio,false);

  function inicio()
  {
    document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);
    document.getElementById('recuadro1').addEventListener('mouseup',presion2,false);
  }

  function presion1()
  {
    document.getElementById('recuadro1').style.backgroundColor='#ffff00';
  }

  function presion2()
  {
    document.getElementById('recuadro1').style.backgroundColor='#ff0000';
  }
</script>
  
</body>
</html>


Retornar al menu