una fácil...:)

xzet · #1 (**permalink**) 23/02/2011, 12:09

Tengo 1 fondo blanco y sobre el, tres botones que me cambian el color del fondo cuando los clicko....y estoy buscando la manera de restaurar el color a blanco al clickar sobre el mismo fondo....

el problema lo tengo cuando le doy la opción onclick al body, (o a la misma div, da lo mismo) q los botones al estar incluidos en ella dejan de funcionar (por estar dentro, supongo, puesto que reconoce q le doy a la div o al body antes que a los botones......)

Como puedo enfocarlo???

Muchas Gracias de antemano Gente!!:)

walterdevel · #2 (**permalink**) 23/02/2011, 12:34

Podés poner el html y el js que estás usando?

xzet · #3 (**permalink**) 23/02/2011, 13:05

pues algo tan simple como esto:

<body >
<div id="contenedor" onclick="blanco()">
<input type="button" class="boton" value="Rojo" onclick="rojo()"/>
<input type="button" class="boton" value="Verde" onclick="verde()"/>
<input type="button" class="boton" value="Azul" onclick="azul()"/>
</div>
<script type="text/javascript">
function rojo(){
document.bgcolor = "red";
}
function verde(){
document.bgcolor = "green";
}
function azul(){
document.bgcolor = "blue";
}
function blanco(){
document.bgcolor = "white";
}
</script>
</body>

da lo mismo q le de el valor onclick a la div q al body....al estar los botones dentro de contenido reconoce antes el click de la div q el de los botones, por lo tanto los botones dejan d funcionar........ :/

alguna idea? ;)

ocp001a · #4 (**permalink**) 23/02/2011, 13:47

No me parece adecuado tu planteamiento, a menos que fuera con fines didácticos. Para aignarle el click al boy y que no lo adquieran los elementos internos, deberías buscar información sobre el stoppropagation

massu_vago · #5 (**permalink**) 23/02/2011, 20:54

amigo te lo planteo de otra forma mas simple y menos engorrosa

corrige tu codigo asi
<head>
<script type="text/javascript">
function Color(bgColor){
document.bgcolor = bgColor;
}
</script>
</head>
<body onclick="Color('white')">
<div id="contenedor" onclick="blanco()">
<input type="button" class="boton" value="Rojo" onclick="Color('red')"/>
<input type="button" class="boton" value="Verde" onclick="Color('green')"/>
<input type="button" class="boton" value="Azul" onclick="Color('blue')"/>
</div>
</body>

basicamente lo o que hice fue eliminar funciones rebundantes y dejar el javascript en el body por q el head es lo primero que se carga y asi te aseguras que siempre se carguen tus funciones espero el codigo te ayude

zerokilled · #6 (**permalink**) 23/02/2011, 22:09

@massu_vago,
¿comprobastes tu codigo? cierto que el codigo se puede simplificar pero el tema no va por esa area. si hubieras comprobado tu codigo te hubieras fijado de la situacion. el problema tiene que ver con la propagacion de eventos.