Localizar objeto y asignar evento

Se trata de localizar un bloque div de la página web y cambiarle el color del fondo pulsando sobre un botón.

Se usarán dos botones uno cambia el color al rojo y otro lo cambia a azul.

Los cambios se harán mediante eventos.

Solución

El script sería el que sigue, puedes ponerlo en head o al final de body.

function cambiarFondo(){

var blq = document.getElementById('destino');

switch (event.target.id ){

    case "rojo":

       blq.style.backgroundColor = "red";

       break;

    case "azul":

       blq.style.backgroundColor = "blue";

       break;

  }

}

function iniciar()

{

var botones = document.getElementById("botones");

botones.addEventListener('click', cambiarFondo)

}

El fragmento HTML de la página web podría ser algo así. Completa el resto de la página con head y las etiquetas restantes.

<body onload="iniciar()">

<div id="destino" style="height:200px; width:200px">

Bloque que se le va a cmabiar el color de fondo

</div>

<div id="botones">

<button id="rojo">Pulsar Rojo</button>

<button id="azul">Pulsar Azul</button>

</div>

Explicación

El evento onload de body nos asegura que todo está está ya cargado antes de ejecutar el script.

En este ejemplos se usael método getElementById() para localizar el bloque de los botones y el bloque al que se le va a cambiar el color de fondo.

La función recibe como único argumento el valor del atributo id del elemento que se está buscando. En este caso botones y destino. La función devuelve el objeto que represetna a estos elementos.

Al objeto botones le asigna la función de llamada para el evento disparado al hacer click con el botón del ratón sobre él. La función cambiarFondo()

Cuando se produce el evento la función de llamada primero obtiene el objeto al que se le cambia el color se guarda en la variable blq. Si el evento proviene del boton rojo (evetn.target.id == "rojo") pone el fondo en red y si el azul, lo pone en blue.

Esta es una solución y puede haber otras: un evento para cada botón, usar argumentos para los valores de los colores o del bloqeu destino... pero esta es bastante claro y simple para que veas como localiar elementos de la web y como asignar y procesar eventos.