¿Por qué mi imagen no aparece cuando uso Javascript innerHTML para llamarlo?

Soy bastante nuevo en Javascript, y estaba intentando algo. Estoy usando una función para cargar una imagen dentro de una tabla usando innerHTML. Pero la imagen no aparece, a menos que llame a alerta ("lo que sea") en la parte inferior de la función, luego aparece mientras la alerta está visible. El código que estoy utilizando es algo así como (la función se llama desde un archivo externo de JS)¿Por qué mi imagen no aparece cuando uso Javascript innerHTML para llamarlo?

<script> 
    function show(){ 
     document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>"; 
    } 
</script> 

<body> <input name="b1" type="button" value="pics" onclick="show()"/> 
<table><td id='imageHolder1'>picture</td></table> 
</body> ``

No entiendo por qué no funciona, todos los ejemplos que he mirado son similares, lo no veo grandes diferencias. Incluso si intento sin la etiqueta, no funciona. Bueno, cualquier ayuda bienvenida! Gracias de antemano, y si tiene alguna sugerencia sobre cómo hacer esto (sin jquery, ya que todavía estoy aprendiendo javascript), también lo agradecería. ¡Gracias de nuevo!

Fuente

2012-03-01 biobio

Marca el #, necesitas escapar de "en tu interiorHTML string. innerHTML es una bestia con la que trabajar, porque tienes que asegurarte de que todo lo que estás insertando es verdadero y un buen HTML. Podría querer buscar en el javascript de manipulación de DOM más prolijo, pero más digno de confianza, como 'appendChild', etc. – user17753

Además, sugiero que trabajes con algo como Firebug para FF o algún otro depurador de JavaScript, ya que estos errores son más fáciles de detectar. – user17753

gracias, intentaré appendChild, y definitivamente miraré los depuradores de Javascript, ya que nada parece funcionar con este ejemplo tal como está. – biobio

Usted tiene un error en su cadena:

document.getElementById('imageHolder1').innerHTML="<a href="#"><img='photos/picture.jpg' border=0/></a>";

debe leer

document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border=0/></a>";

(aviso "a 'reemplazo)

Fuente

2012-03-01 21:35:57

Esto tiene que ser un mal cut-n-paste, de lo contrario produciría un Synt axError –

cierto, borré el src al pegar – biobio

no va a agregar la imagen src y. debería ser href='#' debería ser así

function show(){ 
    document.getElementById('imageHolder1').innerHTML="<a href='#'><img src='photos/picture.jpg' border='0'/></a>"; 
}

Fuente

2012-03-01 21:36:43 clem

tratar de darle a la imagen un id de 'imagen' a continuación, utilizando la siguiente:

function show(){ 
    document.getElementById('image').src = 'photos/picture.jpg' 
}

Fuente

2012-03-01 21:38:06 Jack

gracias! funciona. – biobio

Me alegro de haber ayudado. – Jack

hay un montón de errores y atajos perezosos en su código. hice un violín y tuve que corregir bastantes lugares que parecen un trabajo muy apresurado ... aquí está tu violín, pero juega con algo de devoción: http://jsfiddle.net/uXpeK/

Fuente

2012-03-01 21:41:58 mindandmedia

¡Muchas gracias por tomarse su tiempo para hacer esto! Supongo que tiene algo que ver con poner los atributos importantes. – biobio

¿Por qué mi imagen no aparece cuando uso Javascript innerHTML para llamarlo?

Respuesta

Cuestiones relacionadas