Variable javascript para llamar a una imagen

[joss23]

¡Buenas tardes foreros!

Mi duda es la siguiente...

Tengo una función de javascript que muestra una imagen u otra dependiendo del valor de una variable. El código es el siguiente:

Código:

function mostrarimagen(){

var imagen = "  "

switch(variable)
	 
	 { case "1": imagen = 'abc.jpg'; break;
	    case "2": imagen = 'def.jpg'; break;
	    case "3": imagen = 'ghi.jpg'; break;
	    case "4": imagen = 'jkl.jpg'; break;
	    case "5": imagen = 'mno.jpg'; break; };

document.write('<img src"valor de 'imagen'" width="50" height="50">');

}

Ésta es la idea, dependiendo de una primera variable a la que anteriormente se le habrá dado valor se deberá mostrar una imagen u otra. Como he visto que no se puede indicar directamente que src sea igual a la variable he estado probando con getElementById, de la siguiente forma:

Código:

function mostrarimagen(){

var imagen = "  "

switch(variable)
	 
	 { case "1": imagen = 'abc.jpg'; break;
	    case "2": imagen = 'def.jpg'; break;
	    case "3": imagen = 'ghi.jpg'; break;
	    case "4": imagen = 'jkl.jpg'; break;

document.getElementById("myPhoto").src=imagen;

document.write('<img id="myPhoto" width="50" height="50">');

}

Pero no me funciona...He probado también poniendo document.getElementById("myPhoto").setAttribute("s rc",imagen); y tampoco funciona.

Algun error estoy cometiendo pero soy principiante y no lo veo.. ¿alguien puede ayudarme?

¡Muchas gracias de antemano!

[joss23]

Llevaba media tarde con este problemilla y segundos después de pedir ayuda aquí encuentro la solución...

No pensaba que aunque el código de la img es html estoy trabajando con javascript...

Por si en un futuro a alguien le interesa esta cuestión pongo el código tal como me funciona (ya que muchas veces he encontrado en foros cuestiones que me interesan y cuyo autor respondió en su momento que ya lo había solucionado, sin decir cómo, y particularmente me fastidia mucho jaja):

Código:

function mostrarimagen(){

var imagen = "  "

switch(variable)
	 
	 { case "1": imagen = 'abc.jpg'; break;
	    case "2": imagen = 'def.jpg'; break;
	    case "3": imagen = 'ghi.jpg'; break;
	    case "4": imagen = 'jkl.jpg'; break;
	    case "5": imagen = 'mno.jpg'; break; };

document.write('<img src=' + imagen + ' width="50" height="50">');

}

[esjuanma]

Que tal!
Sí, la solución es correcta.
El problema era que estabas intentando acceder a un elemento HTML que aún no existía.
Por lo que primero debías crear el elemento:

Código:

document.write('<img id="myPhoto" width="50" height="50">');

Y luego acceder a él:

Código:

document.getElementById("myPhoto").src=imagen;

Código final:

Código:

function mostrarimagen(){

var imagen = "  "

switch(variable)
	 
	 { case "1": imagen = 'abc.jpg'; break;
	    case "2": imagen = 'def.jpg'; break;
	    case "3": imagen = 'ghi.jpg'; break;
	    case "4": imagen = 'jkl.jpg'; break;

document.write('<img id="myPhoto" width="50" height="50">');

document.getElementById("myPhoto").src=imagen;

}

Saludos!

[joss23]

Claro ahora le veo la lógica...
Muchas gracias por tu aporte de todos modos esjuanma, de no haber tenido el golpe de inspiración me habría sido de gran ayuda, y aun habiendo sido así ya se algo más para otra ocasión :)

Iniciado por esjuanma

Que tal!
Sí, la solución es correcta.
El problema era que estabas intentando acceder a un elemento HTML que aún no existía.
Por lo que primero debías crear el elemento:

Código:

document.write('<img id="myPhoto" width="50" height="50">');

Y luego acceder a él:

Código:

document.getElementById("myPhoto").src=imagen;

Código final:

Código:

function mostrarimagen(){

var imagen = "  "

switch(variable)
	 
	 { case "1": imagen = 'abc.jpg'; break;
	    case "2": imagen = 'def.jpg'; break;
	    case "3": imagen = 'ghi.jpg'; break;
	    case "4": imagen = 'jkl.jpg'; break;

document.write('<img id="myPhoto" width="50" height="50">');

document.getElementById("myPhoto").src=imagen;

}

Saludos!