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

BramSt · #1 (**permalink**) 21/10/2016, 19:26

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 originaldocument.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**) 21/10/2016, 20:07

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

BramSt · #3 (**permalink**) 22/10/2016, 03:33

Cita:

Iniciado por alvaro_trewhela

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**) 22/10/2016, 08:25

Ve como andas con esto:

Código Javascript:

Ver originalfunction rand(){
return Math.round(Math.random()*255);
}
 
function changeColor(id){
document.getElementById(id).style.backgroundColor='rgb('+rand()+','+rand()+','+rand()+')';
}

BramSt · #5 (**permalink**) 23/10/2016, 08:57

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**) 23/10/2016, 11:07

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

Código HTML:

Ver original<html>
 
<head>
    <script type="text/javascript">
    function rand(){
    return Math.round(Math.random()*255);
    }
 
    function changeColor(){
    var red = rand();
    var green = rand();
    var blue = rand();
    document.getElementById("tester").innerHTML = red+","+green+","+blue;
    var el = document.getElementById("test").style.backgroundColor='rgb('+red+','+green+','+blue+')';
    }   
    </script>
</head>
<body>
<div id="test" style="width:300px;height:300px;" onclick="changeColor();">Element</div><br />
<span id="tester"></span>
 
</body>
</html>

Y este fue el resultado:

BramSt · #7 (**permalink**) 23/10/2016, 15:22

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<html>
 
    <head>
        
        <link rel="stylesheet" type="text/css" href="estilos.css">
        <script type="text/javascript" src="codigoJavaScript.js"></script>
        <title></title>
    </head>
    
    <body>
    
        
        <table id="tabla" border="2">
            <tr id="fila1">
                <td id="c1" onmouseover="cambiarColorRandom(c1);">
                    
                </td>
                <td id="c2" onmouseover="cambiarColorRandom(c2);">
                    
                </td>
                <td id="c3" onmouseover="cambiarColorRandom(c3);">
                    
                </td>
            </tr>
            
            <tr id="fila2">
                <td id="c4" onmouseover="cambiarColorRandom(c4);">
                    
                </td>
                <td id="c5" onmouseover="cambiarColorRandom(c5);">
                    
                </td>
                <td id="c6" onmouseover="cambiarColorRandom(c6);">
                    
                </td>
            </tr>
            
            <tr id="fila3">
                <td id="c7" onmouseover="cambiarColorRandom(c7);">
                    
                </td>
                <td id="c8" onmouseover="cambiarColorRandom(c8);">
                    
                </td>
                <td id="c9" onmouseover="cambiarColorRandom(c9);">
                    
                </td>
            </tr>
            
            
        </table>
        
        
        </body>
</html>

Código Javascript:

Ver originalfunction cambiarColorRandom(identificadorCelda)
{
 
var color;
 
var color2;
 
var color3;
 
color=parseInt(Math.random()*(255));
 
color2=parseInt(Math.random()*(255));
 
color3=parseInt(Math.random()*(255));
 
 
identificadorCelda.bgColor="rgb("+color+","+color2+","+color3+");";
 
console.log(color+","+color2+","+color3);
 
 
 
}

#8 (**permalink**) 23/10/2016, 16:47

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

Código HTML:

Ver original<td id="c1" onmouseover="cambiarColorRandom(c1);">

posibles soluciones:

Código Javascript:

Ver original<td id="c1" onmouseover="c1 = document.getElementById('c1'); cambiarColorRandom(c1);">

o

Código Javascript:

Ver original<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 originalidentificadorCelda.bgColor

por

Código Javascript:

Ver originalidentificadorCelda.style.backgroundColor

te dejo tu código funcionando:

Código HTML:

Ver original<html>
     
        <head>
            
 
            <script type="text/javascript">
            
            
                function cambiarColorRandom(identificadorCelda)
    {
     
    var color;
     
    var color2;
     
    var color3;
     
    color=parseInt(Math.random()*(255));
    color2=parseInt(Math.random()*(255));
    color3=parseInt(Math.random()*(255));
     
     
    identificadorCelda.style.backgroundColor="rgb("+color+","+color2+","+color3+")";
 
     
     
     
    }
            
            
            </script>
            <title></title>
        </head>
        
        <body>
        
            
            <table id="tabla" border="2">
                <tr id="fila1">
                    <td id="c1" onmouseover="cambiarColorRandom(document.getElementById('c1'));">
                        1
                    </td>
                    <td id="c2" onmouseover="cambiarColorRandom(document.getElementById('c2'));">
                        2
                    </td>
                    <td id="c3" onmouseover="cambiarColorRandom(document.getElementById('c3'));">
                        3
                    </td>
                </tr>
                
                <tr id="fila2">
                    <td id="c4" onmouseover="cambiarColorRandom(document.getElementById('c4'));">
                        4
                    </td>
                    <td id="c5" onmouseover="cambiarColorRandom(document.getElementById('c5'));">
                        5
                    </td>
                    <td id="c6" onmouseover="cambiarColorRandom(document.getElementById('c6'));">
                        6
                    </td>
                </tr>
                
                <tr id="fila3">
                    <td id="c7" onmouseover="cambiarColorRandom(document.getElementById('c7'));">
                        7
                    </td>
                    <td id="c8" onmouseover="cambiarColorRandom(document.getElementById('c8'));">
                        8
                    </td>
                    <td id="c9" onmouseover="cambiarColorRandom(document.getElementById('c9'));">
                        9
                    </td>
                </tr>
                
                
            </table>
            
            
            </body>
    </html>