Variable en InnerHTML

GameAndWatch · #1 (**permalink**) 22/11/2011, 10:21

¡Hola!
Estaba intentando crear un generador de imagenes al azar con 5 divs flotantes.
Encontré por ahí un código que genera el número,y funciona muy bien.El problema es que al asignar en el bucle el nombre en una variable,me da este problema:
"document.getElementById(cuadrado) is null"
¿Alguien sabe que es lo que le pasa al código?
Aqui está el código simplificado a 6 imágenes:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
<title>Menu contextual</title>
<link rel="stylesheet" href="g2.css" type="text/css" />
<script type="text/javascript">
for(var i = 1; i <= 4; i++){
    var iSuperior = 4;
    var dResult = Math.random();
    dResult = Math.floor(dResult * (iSuperior + 1));
    //var cuadrado = String("d" + dResult);
    var cuadrado="'d"+ dResult +"'";    
switch(dResult){
    case 0:
    var imprimir="<img width='200' height='150' src='2cia6ic.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        break;
        case 1:
            var imprimir="<img width='200' height='150' src='966cfcff1a83a6ce3eb7abac493c87e9.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;//document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif";   
        break;
        case 2:
        var imprimir="<img width='200' height='150' src='12663d2a1c1fba67cf007be.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
//document.getElementById(cuadrado).src="12663d2a1c1fba67cf007be.gif";      
        break;
        case 3:
                var imprimir="<img width='200' height='150' src='97ad6f9782f8090599ee0a2.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="97ad6f9782f8090599ee0a2.gif";      
        break;
        case 4:
        var imprimir="<img width='200' height='150' crc='bfff33331089fc046d0efa1.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="bfff33331089fc046d0efa1.gif";
        break;
        case 6:
        var imprimir="<img width='200' height='150' src='d777c8de014bfb21d3647ff.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="d777c8de014bfb21d3647ff.gif";
        break;
        default:
        document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif";
        break;  
    }
</script>
</head>
<body>
<div id="d0" style="width:200px; float:left;"><img id="dd0" value="1" width="200" height="150"/></div>
<div id="d1"  style="width:200px; float:left;"><img id="dd1" value="1" width="200" height="150"/></div>
<div id="d2"  style="width:200px; float:left;"><img id="dd2" value="1" width="200" height="150"/></div>
<div id="d3"  style="width:200px; float:left;"><img id="dd3" value="1" width="200" height="150"/></div>
<div id="d4"  style="width:200px; float:left;"><img id="dd4" value="1" width="200" height="150"/></div>
 
 
</body>
</html>

Tambien probé con .src en la etiqueta imagen,pero me daba el mismo error.

¿Que es lo incorrecto en el InnerHTML?¿Alguna sugerencia?
¡Gracias de antemano por la respuesta!

Franz1628 · #2 (**permalink**) 22/11/2011, 10:27

Parece que en la linea 12 falta una "d"
var cuadrado="'dd"+ dResult +"'";

GameAndWatch · #3 (**permalink**) 22/11/2011, 14:15

Gracias por responder tan rápido.
En cuanto esté en mi PC,comprobaré si es eso¡Gracias!

_cronos2 · #4 (**permalink**) 22/11/2011, 14:19

Varias cosas:
A) Si no me fallan los cálculos, dResult va a tomar los valores [0, 4], así que sobra el case 5, 6 y default
B) Ten en cuenta que estás poniendo

Cita:

var cuadrado="'d"+ dResult +"'";

Esas comillas simples sobran, las dobles ya te dan el string.
C) Un switch, a mi entender, es muy Java. En JS es mejor usar objetos, o si los índices son números, mejor arrays:

Código Javascript:

Ver originalvar codes = ['foo', 'bar', 'baz', 'candy'];
console.log(codes[dResult]);

Saludos (:

GameAndWatch · #5 (**permalink**) 22/11/2011, 15:02

¡Gracias por responder!Es que soy nuevo en javascript...
Puse las comillas por si no consideraba eso un string...visual Basic pondía poner pegas en eso...
¿me puedes explicar lo que hace console.log?Es que no lo entiendo mucho...además,lo he vuelto a dejar así y sigue dando error...

_cronos2 · #6 (**permalink**) 22/11/2011, 16:16

console es la consola de errores. Por ejemplo en Chrome, usa F12 o Ctrl+J y te saldrá, entonces ve a la pestaña Consola y podrás ejecutar código JS, ver los logs del código ejecutado y los errores que haya podido haber. En FF también hay una consola nativa pero es bastante cutre, mejor usa Firebug (y prepárate a que te chupe RAM

)
Pon el código tal y como lo tienes ahora para que podamos ayudarte.
Saludos (:

GameAndWatch · #7 (**permalink**) 23/11/2011, 11:23

Pongo el código como lo he dejado hasta ahora.He hecho algún cambio,pero no sé si está igual que al principio del tema:

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu contextual</title>
<link rel="stylesheet" href="g2.css" type="text/css" />
<script type="text/javascript">
 
for(var i = 1; i <= 4; i++){
    var iSuperior = 4;
    var dResult = Math.random();
    dResult = Math.floor(dResult * (iSuperior + 1));
    //var cuadrado = String("d" + dResult);
    var cuadrado="'dd"+ dResult +"'";   
    //alert(cuadrado);
 
switch(dResult){
    case 0:
    var imprimir="<img width='200' height='150' src='2cia6ic.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        break;
        case 1:
            var imprimir="<img width='200' height='150' src='966cfcff1a83a6ce3eb7abac493c87e9.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;//document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif";   
        break;
        case 2:
        var imprimir="<img width='200' height='150' src='12663d2a1c1fba67cf007be.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
//document.getElementById(cuadrado).src="12663d2a1c1fba67cf007be.gif";      
        break;
        case 3:
                var imprimir="<img width='200' height='150' src='97ad6f9782f8090599ee0a2.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="97ad6f9782f8090599ee0a2.gif";      
        break;
        case 4:
        var imprimir="<img width='200' height='150' crc='bfff33331089fc046d0efa1.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="bfff33331089fc046d0efa1.gif";
        break;
        case 6:
        var imprimir="<img width='200' height='150' src='d777c8de014bfb21d3647ff.gif'/>"
        document.getElementById(cuadrado).innerHTML= imprimir;
        //document.getElementById(cuadrado).src="d777c8de014bfb21d3647ff.gif";
        break;
        default:
        document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif";
        break;  
    }
    document.writeln("Entre 0 y " + iSuperior + " aleatorio " + i + " : " + dResult);
    document.writeln("<br>");
    if(dResult > iSuperior) document.writeln("Rango erroneo");
    } 
</script>
</head>
<body>
<div id="d0" style="width:200px; float:left;"><img id="dd0" src="2cia6ic.gif" value="1" width="200" height="150"/></div>
<div id="d1"  style="width:200px; float:left;"><img id="dd1" src="2cia6ic.gif" value="1" width="200" height="150"/></div>
<div id="d2"  style="width:200px; float:left;"><img id="dd2" src="2cia6ic.gif" value="1" width="200" height="150"/></div>
<div id="d3"  style="width:200px; float:left;"><img id="dd3" src="2cia6ic.gif" value="1" width="200" height="150"/></div>
<div id="d4"  style="width:200px; float:left;"><img id="dd4" src="2cia6ic.gif" value="1" width="200" height="150"/></div>
 
 
</body>
</html>

Probé incluso con la propiedad src cambiandolo por el img en lugar del div,pero me salía el mismo error...
Muchas gracias por el interes _cronos2 y perdona las molestias.

_cronos2 · #8 (**permalink**) 23/11/2011, 12:05

Y... ¿qué has cambiado exactamente? Yo lo veo bastante igual, revisa mi otro post, reléelo y aplica los cambios.
Saludos.

GameAndWatch · #9 (**permalink**) 23/11/2011, 14:24

¿pero como puedo aplicar aqui un array?
Me temo que no entiendo lo que me quieres decir con el array...

_cronos2 · #10 (**permalink**) 23/11/2011, 14:35

Cita:

Iniciado por GameAndWatch

¿pero como puedo aplicar aqui un array?
Me temo que no entiendo lo que me quieres decir con el array...

Veamos, tú tienes esto:

Código:

switch(dResult){
* * case 0:
* * var imprimir="<img width='200' height='150' src='2cia6ic.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;
* * * * break;
* * * * case 1:
* * * * * * var imprimir="<img width='200' height='150' src='966cfcff1a83a6ce3eb7abac493c87e9.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;//document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif"; * 
* * * * break;
* * * * case 2:
* * * * var imprimir="<img width='200' height='150' src='12663d2a1c1fba67cf007be.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;
//document.getElementById(cuadrado).src="12663d2a1c1fba67cf007be.gif";* * * 
* * * * break;
* * * * case 3:
* * * * * * * * var imprimir="<img width='200' height='150' src='97ad6f9782f8090599ee0a2.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;
* * * * //document.getElementById(cuadrado).src="97ad6f9782f8090599ee0a2.gif";* * * 
* * * * break;
* * * * case 4:
* * * * var imprimir="<img width='200' height='150' crc='bfff33331089fc046d0efa1.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;
* * * * //document.getElementById(cuadrado).src="bfff33331089fc046d0efa1.gif";
* * * * break;
* * * * case 6:
* * * * var imprimir="<img width='200' height='150' src='d777c8de014bfb21d3647ff.gif'/>"
* * * * document.getElementById(cuadrado).innerHTML= imprimir;
* * * * //document.getElementById(cuadrado).src="d777c8de014bfb21d3647ff.gif";
* * * * break;
* * * * default:
* * * * document.getElementById(cuadrado).src="966cfcff1a83a6ce3eb7abac493c87e9.gif";
* * * * break;* 
* * }

Que no sé a ti, pero a mí me parece un poco repetitivo. ¿Qué tal si lo ponemos así?

Código:

var URLs = ['url1', 'url2', 'url3', ...]
var makeString = function(url){
 return "<img width='200' height='150' src='" + url + ".gif'/>";
}
var cuadrado = document.getElementById(cuadrado);
// Ya tenemos todas las variables, ahora simplemente hacemos
cuadrado.innerHTML = makeString( URLs[dResult] );

Y así, pasas de 33 líneas a tan solo 7.
Espero que ahora te haya quedado claro.
Saludos (:
Edit: Shit, salen asteriscos en vez de espacios, maldito copy&paste

IsaBelM · #11 (**permalink**) 23/11/2011, 15:32

sería mas conveniente modificar el src de la imagen que usar innerHTML

Cita:

Iniciado por _cronos2

Edit: Shit, salen asteriscos en vez de espacios, maldito copy&paste

donde se ponga una buena cita, ......

_cronos2 · #12 (**permalink**) 23/11/2011, 16:09

Cita:

Iniciado por IsaBelM

sería mas conveniente modificar el src de la imagen que usar innerHTML

También es verdad, vi tanta maraña de código que ni si quiera me paré a pensar en lo que hacía

Cita:

donde se ponga una buena cita, ......

¿A qué hora paso a recogerte?

Primero probé con el highlight JS, y me salieron los asteriscos, luego intenté con CODE porque como es texto plano pensé que no daría problemas, y siguieron saliendo, así que dije http://www.youtube.com/watch?v=DKw9cqcpG3o, así se queda XD
Saludos (:

IsaBelM · #13 (**permalink**) 24/11/2011, 05:57

primero envíame alguna prenda tuya, ya usada, para que mi perro (hurco) se acostumbre a tu olor corporal. en caso contrario, no respondo de su reacción

GameAndWatch · #14 (**permalink**) 24/11/2011, 09:05

¡Muchas gracias por lo del array!

Así se queda mucho más ordenado.He cambiado aqui cuadrado por cuaadrado para que no diera conflicto en la primera variable donde declaro el nombre.
Pero sigue siendo null aqui:

var cuadrado = document.getElementById(cuadrado);
¿Porqué?¿Es que no se puede poner una variable?

Muchas gracias por la respuesta y perdona que sea tan pesado _cronos2

_cronos2 · #15 (**permalink**) 24/11/2011, 09:27

Si ya lo dije yo, que ni me di cuenta de lo que hacía el código

Te dice eso porque ese tag script está antes del div que estás buscando. Las webs se cargan línea por línea, así que si desde JS buscas algo en el DOM que se va a cargar después, no lo va a encontrar. Hay dos opciones: o usas window.onload, para esperar a que cargue toda la página para ejcutar el código; o mueves todo el tag script justo antes de </body> (en realidad bastaría con ponerlo debajo de los divs, pero así te aseguras de que estará todo el DOM cargado).
Saludos (:

GameAndWatch · #16 (**permalink**) 24/11/2011, 11:43

¿como hago lo del window.load?

Porque estoy revisando el código,ahora no da error pero no carga las imagenes...(lo he puesto entre el </body> y el </html>)
Nota:La ruta es correcta,miro el código fuente pero muestra los cambios.

Edito:¡Ya está arreglado!
Lo he conseguido con window.onload y fijandome mejor en el src.
Muchas gracias por la ayuda. Sois los mejores.