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
<script>
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)
}
</script>
<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 toda la página está está ya cargada antes de ejecutar el script.
En este ejemplos se usa el 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 bloque destino... pero esta es bastante claro y simple para que veas como localiar elementos de la web y como asignar y procesar eventos.