2012-03-01 2 views
6

Я довольно новичок в Javascript, и я пытался что-то выпустить. Я использую функцию для загрузки изображения внутри таблицы с помощью innerHTML. Но изображение не появляется, если я не вызываю предупреждение («все») в нижней части функции, а затем появляется, пока отображается предупреждение. код я использую что-то вроде (функция вызывается из внешнего файла JS)Почему мое изображение не отображается, когда я использую Javascript innerHTML для его вызова?

<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> `` 

Я не понимаю, почему он не работает, все примеры, я посмотрел на похожи, я не вижу больших различий. Даже если я попытаюсь отключить тег, это не сработает. Ну любая помощь приветствуется! Спасибо заранее, и если у вас есть какие-либо предложения о том, как это сделать (без jquery, так как я все еще изучаю javascript), я был бы также признателен. Еще раз спасибо!

+0

Проверьте #, вам нужно избежать «в вашем внутреннемHTML string. innerHTML - это зверь, с которым нужно работать, потому что вы должны убедиться, что все, что вы вставляете, является истинным и хорошим HTML. Возможно, вам стоит взглянуть на более подробные, но более заслуживающие доверия DOM, манипулирующие javascript, такие как 'appendChild' и т. д. – user17753

+0

Кроме того, я предлагаю вам работать с чем-то вроде Firebug для FF или какого-либо другого отладчика JavaScript, так как эти ошибки легче обнаружить. – user17753

+0

спасибо, я попробую appendChild и окончательно посмотрю на отладчики Javascript, поскольку с этим примером ничего не работает как есть. – biobio

ответ

4

У вас ошибка в строке:

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

Следует читать

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

(уведомление "до" замены)

+0

Это должно быть плохой вырезать-в-пасту, иначе это приведет к синтезу axError –

+0

true, я удалил src при вставке – biobio

1

вы не добавляете СРК изображения и. должно быть href='#' должно быть таким:

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

Попробуйте дать изображению идентификатор «образ», то используя следующее:

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

спасибо! оно работает. – biobio

+0

Рад помочь. – Jack

2

есть много ошибок и ленивых ярлыки в вашем коде. я сделал скрипку и должен был исправить немало мест, которые выглядят как очень поспешная работа ... вот ваша скрипка, но играйте с некоторой преданностью: http://jsfiddle.net/uXpeK/

+0

Большое спасибо за то, что нашли время, чтобы сделать это! Я предполагаю, что это имеет какое-то отношение к вложению важных атрибутов. – biobio

Смежные вопросы