Problema If de boton 1 vez pulsado tenga 1 color y al volverlo a pulsar el 1er color

robinsv · #1 (**permalink**) 11/11/2010, 05:38

Código:

	function Funcion2(COLOR) {
	var aux ;
	
		if (document.getElementById(COLOR).style.background == "#ffffff"){
				document.getElementById(COLOR).style.background="#000000";		
		}
		else {
				document.getElementById(COLOR).style.background = "#ffffff";
		}	
	}

Lo que quiero esque el boton si tiene el fondo blanco lo pase a negro y si esta en negro lo pase a blanco, pero siempre se desvia por el Else y lo pone de color blanco.

Saludos!

quimfv · #2 (**permalink**) 11/11/2010, 06:18

1. El nombre del atributo es backgroundColor no background.
2. Si haces un

Código Javascript:

Ver originalalert(document.getElementById(COLOR.id).style.backgroundColor)

veras que en vez de decir #000000 dice rgb(0, 0, 0).

Y ahora alucina con la solución que te he encontrado

Código Javascript:

Ver originalfunction Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).style.backgroundColor;
    alert(aux);
        if (rgbConvert(aux) == "#000000"){
                document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
        }
        else {
                document.getElementById(COLOR.id).style.backgroundColor = "#000000";
        }   
    }
function rgbConvert(str) {
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
   str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
   str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}

Código HTML:

Ver original<input name="boton" type="button" id="boton" onClick="Funcion2(this)" style="background-color: #000000">

Una funcion que convierte el texto rgb(0,0,0) a #000000

Fijate que uso this para pasar el objeto, esto lo puedes cambiar y poner directamente el id del boton.

Tambien puedes sacar el alert().

Lo he encontrado aqui.

Si alguien lo sabe, nos podría explicar el porque de esa, aparentemente, incoherencia de javascript.

Claro que como se trata de textos tambien se puede hacer esto y funciona

Código Javascript:

Ver originalfunction Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).style.backgroundColor;
    alert(aux);
        if (aux == "rgb(0, 0, 0)"){
                document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
        }
        else {
                document.getElementById(COLOR.id).style.backgroundColor = "#000000";
        }   
    }

Fijate en las comillas aux == "rgb(0, 0, 0)"

Quim

robinsv · #3 (**permalink**) 11/11/2010, 10:35

osti no me habia fijado que lo comparaba en rgb, yo pensaba que si pasaba algo asi lo convertia solo.

muchas gracias, mañana lo testeo en cuanto llegue al curro!

Tecna · #4 (**permalink**) 11/11/2010, 14:12

Buenas,

la propiedad style sólo devolverá un valor si se ha definido previamente mediante el atributo style del elemento html o mediante las propiedades de estilo del objeto CSS2Properties. Si se definió con la etiqueta <style> o en una hoja de estilos externa el valor devuelto sería una cadena vacia.

En cuanto a lo de como se codifica el valor no tiene nada que ver con javascript, ya que todas las formas válidas para css lo serían también para javascript, pero como se muestra o almacena el valor depende exclusivamente del navegador, firefox y chrome lo muestran en rgb pero opera, konqueror y explorer lo muestran en hexadecimal.

quimfv · #5 (**permalink**) 12/11/2010, 02:20

Pues Tecna tiene razon y por tanto la solucion no sierve para todos los navegadores.

Una vez mas tendremos que programar dos versiones de lo mismo, en este caso es fàcil

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/JavaScript">
function Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).style.backgroundColor;//innecesario
    alert(aux);//innecesario
    if(document.getElementById(COLOR.id).style.backgroundColor.indexOf("#")!=-1){
            aux=document.getElementById(COLOR.id).style.backgroundColor;
        }else{
            aux=rgbConvert(document.getElementById(COLOR.id).style.backgroundColor);
        }
        if (aux == "#000000"){
                document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
        }
        else {
                document.getElementById(COLOR.id).style.backgroundColor = "#000000";
        }   
    }
function rgbConvert(str) {
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
   str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
   str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}</script>
 
<body>
<input name="boton" type="button" id="boton" onClick="Funcion2(this)" style="background-color: #000000">
</body>
</html>

Quizas una forma mas elegante seria definir dos clases CSS (digamos botonblanco, botonnegro) usar .className en la función

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/JavaScript">
function Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).className;//innecesario
    alert(aux);//innecesario
        if (document.getElementById(COLOR.id).className == "botonBlanco"){
                document.getElementById(COLOR.id).className = "botonNegro";      
        }
        else {
                document.getElementById(COLOR.id).className = "botonBlanco";
        }   
    }
</script>
<style>
.botonBlanco{
        background-color: #FFFFFF;
}
 
.botonNegro{
         background-color: #000000;
}
 
</style>
<body>
<input name="boton" type="button" id="boton" onClick="Funcion2(this)" class="botonBlanco">
</body>
</html>

Elige la que mas te guste, estas funcionan en FF y IE.

Quim

robinsv · #6 (**permalink**) 16/11/2010, 05:25

Este codigo me ha funcionado alfinal, el problema esque en firefox funciona pero en internet iexplorer no, y todos los que visitan la web entran desde IEXPLORER

Código:

      function Funcion2(COLOR) {
		var aux=document.getElementById(COLOR).style.backgroundColor;
		if (aux == "rgb(152, 251, 152)"){
                      document.getElementById(COLOR).style.backgroundColor="#ffffff";
					  document.getElementById(COLOR).style.background="#ffffff"; 					  
              }
              else {
                      document.getElementById(COLOR).style.backgroundColor="#98FB98";
					  document.getElementById(COLOR).style.background="#98FB98";
              }  
          }

voy a probar cambiando de clases

robinsv · #7 (**permalink**) 17/11/2010, 05:26

hay alguna forma de cambiar el fondo de un boton en Iexplorer?

vanessacruz_7 · #8 (**permalink**) 01/04/2011, 08:42

Cita:

Iniciado por quimfv

1. El nombre del atributo es backgroundColor no background.
2. Si haces un

Código Javascript:

Ver originalalert(document.getElementById(COLOR.id).style.backgroundColor)

veras que en vez de decir #000000 dice rgb(0, 0, 0).

Y ahora alucina con la solución que te he encontrado

Código Javascript:

Ver originalfunction Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).style.backgroundColor;
    alert(aux);
        if (rgbConvert(aux) == "#000000"){
                document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
        }
        else {
                document.getElementById(COLOR.id).style.backgroundColor = "#000000";
        }   
    }
function rgbConvert(str) {
   str = str.replace(/rgb\(|\)/g, "").split(",");
   str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
   str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
   str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
   str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
   str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
   str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
   return ('#' + str.join(""));
}

Código HTML:

Ver original<input name="boton" type="button" id="boton" onClick="Funcion2(this)" style="background-color: #000000">

Una funcion que convierte el texto rgb(0,0,0) a #000000

Fijate que uso this para pasar el objeto, esto lo puedes cambiar y poner directamente el id del boton.

Tambien puedes sacar el alert().

Lo he encontrado [URL="http://www.tek-tips.com/viewthread.cfm?qid=1436140&page=11"]aqui[/URL].

Si alguien lo sabe, nos podría explicar el porque de esa, aparentemente, incoherencia de javascript.

Claro que como se trata de textos tambien se puede hacer esto y funciona

Código Javascript:

Ver originalfunction Funcion2(COLOR) {
    var aux=document.getElementById(COLOR.id).style.backgroundColor;
    alert(aux);
        if (aux == "rgb(0, 0, 0)"){
                document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
        }
        else {
                document.getElementById(COLOR.id).style.backgroundColor = "#000000";
        }   
    }

Fijate en las comillas aux == "rgb(0, 0, 0)"

Quim

Hola, gracias por tu ayuda, me ha servido el código... el problema que tengo es que el boton al ser presionado no permance con el color cambiado, sino que vuelve a su estado original en menos de un segundo =( ... cuando se presiona un boton el ejecuta una acción(muestra una tabla)... quiero que quede en negro cuando se presione, hasta que se vuelva a presionar otro boton (son 7 botones, cada uno genera una tabla diferente) . Para generar las tablas tengo programado en php. por favor, me podrias ayudar? gracias