Foros del Web » Programando para Internet » Javascript »

¿por que no funciona el formato rgb en este codigo?

Estas en el tema de ¿por que no funciona el formato rgb en este codigo? en el foro de Javascript en Foros del Web. Hola, tengo una función con este trozo de codigo, para que se ejecute al pasar el ratón sobre la celda de una tabla, y me ...
  #1 (permalink)  
Antiguo 21/10/2016, 19:26
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 7 años, 3 meses
Puntos: 5
¿por que no funciona el formato rgb en este codigo?

Hola, tengo una función con este trozo de codigo, para que se ejecute al pasar el ratón sobre la celda de una tabla, y me cambie el color.

Código Javascript:
Ver original
  1. document.getElementById(identificadorCelda).bgColor='rgb(0,255,0)';

Pues resulta que "funciona", pero hasta cierto punto... ya que aunque efectivamente se me genera un color, no es el que corresponde a esos valores rgb, los ponga como los ponga... y sin embargo, en formato hexadecimal o con el nombre del color sí funciona perfectamente y se imprime el color que se tiene que imprimir.

alguien sabe a que se debe? Muchas gracias.
  #2 (permalink)  
Antiguo 21/10/2016, 20:07
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿por que no funciona el formato rgb en este codigo?

document.getElementById(id).style.backgroundColor= 'rgb(red,green,blue)';

  #3 (permalink)  
Antiguo 22/10/2016, 03:33
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 7 años, 3 meses
Puntos: 5
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Cita:
Iniciado por alvaro_trewhela Ver Mensaje
document.getElementById(id).style.backgroundColor= 'rgb(red,green,blue)';

Ya, pero como necesito colores aleatorios generando números del 0 al 255 para cada uno de los canales, eso no creo que me sirva, si te refieres a la manera de nombrar los canales.

Muchas gracias.
  #4 (permalink)  
Antiguo 22/10/2016, 08:25
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Ve como andas con esto:

Código Javascript:
Ver original
  1. function rand(){
  2. return Math.round(Math.random()*255);
  3. }
  4.  
  5. function changeColor(id){
  6. document.getElementById(id).style.backgroundColor='rgb('+rand()+','+rand()+','+rand()+')';
  7. }


Última edición por alvaro_trewhela; 22/10/2016 a las 08:46
  #5 (permalink)  
Antiguo 23/10/2016, 08:57
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 7 años, 3 meses
Puntos: 5
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Grcias Alvaro, pero el problema no es ese. El problema es que los valores que le paso no coinciden con el color real. Es decir, si le paso un 255,0,0 no me sale un color rojo, lo mismo me sale un verde extraño...
  #6 (permalink)  
Antiguo 23/10/2016, 11:07
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Extraño a mi me funciona, usé este código para verificar

Código HTML:
Ver original
  1.  
  2.     <script type="text/javascript">
  3.     function rand(){
  4.     return Math.round(Math.random()*255);
  5.     }
  6.  
  7.     function changeColor(){
  8.     var red = rand();
  9.     var green = rand();
  10.     var blue = rand();
  11.     document.getElementById("tester").innerHTML = red+","+green+","+blue;
  12.     var el = document.getElementById("test").style.backgroundColor='rgb('+red+','+green+','+blue+')';
  13.     }  
  14.     </script>
  15. </head>
  16. <div id="test" style="width:300px;height:300px;" onclick="changeColor();">Element</div><br />
  17. <span id="tester"></span>
  18.  
  19. </body>
  20. </html>

Y este fue el resultado:



  #7 (permalink)  
Antiguo 23/10/2016, 15:22
Avatar de BramSt  
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 7 años, 3 meses
Puntos: 5
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Pues efectivamente, tu método funciona, compañero... te voy a enseñar el código que ten´ñia hecho antes a ver si puedes ayudarme a ver dónde está el error, y por qué con bgColor muestra colores, pero NO los correctos.

Código HTML:
Ver original
  1.  
  2.     <head>
  3.        
  4.         <link rel="stylesheet" type="text/css" href="estilos.css">
  5.         <script type="text/javascript" src="codigoJavaScript.js"></script>
  6.         <title></title>
  7.     </head>
  8.    
  9.     <body>
  10.    
  11.        
  12.         <table id="tabla" border="2">
  13.             <tr id="fila1">
  14.                 <td id="c1" onmouseover="cambiarColorRandom(c1);">
  15.                    
  16.                 </td>
  17.                 <td id="c2" onmouseover="cambiarColorRandom(c2);">
  18.                    
  19.                 </td>
  20.                 <td id="c3" onmouseover="cambiarColorRandom(c3);">
  21.                    
  22.                 </td>
  23.             </tr>
  24.            
  25.             <tr id="fila2">
  26.                 <td id="c4" onmouseover="cambiarColorRandom(c4);">
  27.                    
  28.                 </td>
  29.                 <td id="c5" onmouseover="cambiarColorRandom(c5);">
  30.                    
  31.                 </td>
  32.                 <td id="c6" onmouseover="cambiarColorRandom(c6);">
  33.                    
  34.                 </td>
  35.             </tr>
  36.            
  37.             <tr id="fila3">
  38.                 <td id="c7" onmouseover="cambiarColorRandom(c7);">
  39.                    
  40.                 </td>
  41.                 <td id="c8" onmouseover="cambiarColorRandom(c8);">
  42.                    
  43.                 </td>
  44.                 <td id="c9" onmouseover="cambiarColorRandom(c9);">
  45.                    
  46.                 </td>
  47.             </tr>
  48.            
  49.            
  50.         </table>
  51.        
  52.        
  53.         </body>
  54. </html>


Código Javascript:
Ver original
  1. function cambiarColorRandom(identificadorCelda)
  2. {
  3.  
  4. var color;
  5.  
  6. var color2;
  7.  
  8. var color3;
  9.  
  10. color=parseInt(Math.random()*(255));
  11.  
  12. color2=parseInt(Math.random()*(255));
  13.  
  14. color3=parseInt(Math.random()*(255));
  15.  
  16.  
  17. identificadorCelda.bgColor="rgb("+color+","+color2+","+color3+");";
  18.  
  19. console.log(color+","+color2+","+color3);
  20.  
  21.  
  22.  
  23. }
  #8 (permalink)  
Antiguo 23/10/2016, 16:47
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿por que no funciona el formato rgb en este codigo?

Tu código no funcionaba porque pasas como parámetro una variable que no esta declarada:

Código HTML:
Ver original
  1. <td id="c1" onmouseover="cambiarColorRandom(c1);">

posibles soluciones:
Código Javascript:
Ver original
  1. <td id="c1" onmouseover="c1 = document.getElementById('c1'); cambiarColorRandom(c1);">

o

Código Javascript:
Ver original
  1. <td id="c1" onmouseover="cambiarColorRandom(document.getElementById('c1'));">

Paso como párametro un objeto, ya que en tu función ocupas el parámetro como objeto valga la redundancia

Otro error:

pusiste ";" al final en el rgb:

identificadorCelda.bgColor="rgb("+color+","+color2 +","+color3+");"

identificadorCelda.bgColor="rgb("+color+","+color2 +","+color3+")"

Y nuevamente debes cambiar:

Código Javascript:
Ver original
  1. identificadorCelda.bgColor

por

Código Javascript:
Ver original
  1. identificadorCelda.style.backgroundColor

te dejo tu código funcionando:

Código HTML:
Ver original
  1.      
  2.         <head>
  3.            
  4.  
  5.             <script type="text/javascript">
  6.            
  7.            
  8.                 function cambiarColorRandom(identificadorCelda)
  9.     {
  10.      
  11.     var color;
  12.      
  13.     var color2;
  14.      
  15.     var color3;
  16.      
  17.     color=parseInt(Math.random()*(255));
  18.     color2=parseInt(Math.random()*(255));
  19.     color3=parseInt(Math.random()*(255));
  20.      
  21.      
  22.     identificadorCelda.style.backgroundColor="rgb("+color+","+color2+","+color3+")";
  23.  
  24.      
  25.      
  26.      
  27.     }
  28.            
  29.            
  30.             </script>
  31.             <title></title>
  32.         </head>
  33.        
  34.         <body>
  35.        
  36.            
  37.             <table id="tabla" border="2">
  38.                 <tr id="fila1">
  39.                     <td id="c1" onmouseover="cambiarColorRandom(document.getElementById('c1'));">
  40.                         1
  41.                     </td>
  42.                     <td id="c2" onmouseover="cambiarColorRandom(document.getElementById('c2'));">
  43.                         2
  44.                     </td>
  45.                     <td id="c3" onmouseover="cambiarColorRandom(document.getElementById('c3'));">
  46.                         3
  47.                     </td>
  48.                 </tr>
  49.                
  50.                 <tr id="fila2">
  51.                     <td id="c4" onmouseover="cambiarColorRandom(document.getElementById('c4'));">
  52.                         4
  53.                     </td>
  54.                     <td id="c5" onmouseover="cambiarColorRandom(document.getElementById('c5'));">
  55.                         5
  56.                     </td>
  57.                     <td id="c6" onmouseover="cambiarColorRandom(document.getElementById('c6'));">
  58.                         6
  59.                     </td>
  60.                 </tr>
  61.                
  62.                 <tr id="fila3">
  63.                     <td id="c7" onmouseover="cambiarColorRandom(document.getElementById('c7'));">
  64.                         7
  65.                     </td>
  66.                     <td id="c8" onmouseover="cambiarColorRandom(document.getElementById('c8'));">
  67.                         8
  68.                     </td>
  69.                     <td id="c9" onmouseover="cambiarColorRandom(document.getElementById('c9'));">
  70.                         9
  71.                     </td>
  72.                 </tr>
  73.                
  74.                
  75.             </table>
  76.            
  77.            
  78.             </body>
  79.     </html>


Última edición por alvaro_trewhela; 24/10/2016 a las 09:59

Etiquetas: formato, funcion, rgb, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:34.