當我使用Javascript innerHTML調用它時，爲什麼我的圖像不顯示？

我對Javascript很新穎，我正在嘗試一些東西。我正在使用一個函數來使用innerHTML在表格中加載圖像。但是圖像不會顯示出來，除非我在函數底部調用alert（「whatever」），然後在警報可見時顯示。我使用的代碼是一樣的東西（的功能從外部的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> ``

我不明白爲什麼它不工作，我已經看過類似的所有例子中，我看到沒有什麼大的區別。即使我試着用標籤它不起作用。歡迎任何幫助！在此先感謝，如果你有任何關於如何做到這一點的建議（因爲我還在學習javascript，所以沒有jquery），我也很感激。再次感謝！

來源

2012-03-01 biobio

檢查＃，你需要逃避「在你的innerHTML字符串innerHTML是一個可以使用的野獸，因爲你必須確保你所插入的每一個東西都是真實的，很好的HTML。可能想看看更加詳細但更值得信賴的DOM操作javascript，比如'appendChild'等。 – user17753 2012-03-01 21:38:50

另外，我建議你使用像FF或其他JavaScript調試器一樣的螢火蟲，因爲這些錯誤更容易發現。 – user17753 2012-03-01 21:41:13

謝謝，我會嘗試appendChild，並明確地看看Javascript調試器，因爲這個例子似乎沒有任何作用因爲它是這樣的 – biobio 2012-03-01 22:40:03

您在字符串中有一個錯誤：

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>";

（通知「，」更換）

來源

2012-03-01 21:35:57

這必須是一個壞的n-paste，否則它會產生一個Synt axError – 2012-03-01 21:40:13

是真的，我粘貼 – biobio 2012-03-01 22:49:30

您不添加圖像src和它。應該是href='#'它應該是這樣的

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

來源

2012-03-01 21:36:43 clem

先給圖像的「形象」的ID，然後在使用下列內容：

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

來源

2012-03-01 21:38:06 Jack

謝謝刪除了src！有用。 – biobio 2012-03-01 22:38:37

很高興有幫助。 – Jack 2012-03-01 22:39:16

有代碼中的錯誤和懶惰的捷徑地段。我做了一個小提琴，不得不糾正很多地方，看起來很匆忙的工作...這裏是你的小提琴，但玩一些奉獻：http://jsfiddle.net/uXpeK/

來源

2012-03-01 21:41:58 mindandmedia

非常感謝您花時間做到這一點！我想這與放置重要屬性有關。 – biobio 2012-03-01 22:46:44

當我使用Javascript innerHTML調用它時，爲什麼我的圖像不顯示？

回答

相關問題