2012-03-01 5 views
6

私はJavascriptでかなり新しく、何かを試していました。私はinnerHTMLを使用してテーブル内の画像を読み込む関数を使用しています。しかし、画像の下にアラート(「何でも」)が表示されない限り、アラートが表示されている間は画像が表示されません。 私が使用しているコードは、私は、それが動作しない理由を私は理解していない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> `` 

(関数はjsの外部ファイルから呼び出された)のように、私が見てきたすべての例が類似しているものです大きな違いはありません。私がタグを試しても、うまくいきません。まあ助け歓迎!事前にありがとう、もしあなたがこれを行う方法についての提案があれば(私はまだJavaScriptを学んでいるので、jqueryはありません)、私はそれも感謝します。再度、感謝します!

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

#をチェックすると、 "あなたのinnerHTMLあなたが挿入しようとしているものがすべて本当で良いHTMLであることを確認しなければならないので、innerHTMLはうまく動作します。appendChildなどのjavascriptを操作する、より冗長で信頼できるDOMを調べたいかもしれません。 – user17753

+0

また、FFやその他のJavaScriptデバッガ用のFirebugのようなもので作業することをお勧めします。 – user17753

+0

この例では何も動作しないので、appendChildを試して、Javascriptデバッガを見ていきます。それはそのままです – biobio

答えて

4

あなたは、文字列にエラーが発生しています。 href='#'のようになります。

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

これは、カットアンドペーストが悪いことです。さもなければ、それはSynt axError –

+0

true、貼り付けるときにsrcを消去しました – biobio

1

あなたは、画像srcを追加しないと、それ:

1

次を使用して、イメージに「画像」のIDを与えてみてください。

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

ありがとうございました!できます。 – biobio

+0

助けてくれてうれしいです。 – Jack

2

あなたのコード内のエラーと怠惰なショートカットがたくさんあります。私はフィドルを作り、非常に急いで仕事のように見えるいくつかの場所を修正しなければなりませんでした...ここであなたのバイブルですが、いくつかの献身とそれを再生:http://jsfiddle.net/uXpeK/

+0

ありがとうございました!私はそれが重要な属性を入れることと関係があると思います。 – biobio

関連する問題