Tema: Problema If de boton 1 vez pulsado tenga 1 color y al volverlo a pulsar el 1er color
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/11/2010, 02:20
quimfv
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 9 meses
Puntos: 574
Respuesta: Problema If de boton 1 vez pulsado tenga 1 color y al volverlo a pulsar el
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. </head>
  7. <script language="JavaScript" type="text/JavaScript">
  8. function Funcion2(COLOR) {
  9.     var aux=document.getElementById(COLOR.id).style.backgroundColor;//innecesario
  10.     alert(aux);//innecesario
  11.     if(document.getElementById(COLOR.id).style.backgroundColor.indexOf("#")!=-1){
  12.             aux=document.getElementById(COLOR.id).style.backgroundColor;
  13.         }else{
  14.             aux=rgbConvert(document.getElementById(COLOR.id).style.backgroundColor);
  15.         }
  16.         if (aux == "#000000"){
  17.                 document.getElementById(COLOR.id).style.backgroundColor="#ffffff";      
  18.         }
  19.         else {
  20.                 document.getElementById(COLOR.id).style.backgroundColor = "#000000";
  21.         }   
  22.     }
  23. function rgbConvert(str) {
  24.    str = str.replace(/rgb\(|\)/g, "").split(",");
  25.    str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
  26.    str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
  27.    str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
  28.    str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
  29.    str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
  30.    str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
  31.    return ('#' + str.join(""));
  32. }</script>
  33.  
  34. <body>
  35. <input name="boton" type="button" id="boton" onClick="Funcion2(this)" style="background-color: #000000">
  36. </body>
  37. </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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. </head>
  7. <script language="JavaScript" type="text/JavaScript">
  8. function Funcion2(COLOR) {
  9.     var aux=document.getElementById(COLOR.id).className;//innecesario
  10.     alert(aux);//innecesario
  11.         if (document.getElementById(COLOR.id).className == "botonBlanco"){
  12.                 document.getElementById(COLOR.id).className = "botonNegro";      
  13.         }
  14.         else {
  15.                 document.getElementById(COLOR.id).className = "botonBlanco";
  16.         }   
  17.     }
  18. </script>
  19. <style>
  20. .botonBlanco{
  21.         background-color: #FFFFFF;
  22. }
  23.  
  24. .botonNegro{
  25.          background-color: #000000;
  26. }
  27.  
  28. </style>
  29. <body>
  30. <input name="boton" type="button" id="boton" onClick="Funcion2(this)" class="botonBlanco">
  31. </body>
  32. </html>


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

Quim