爲什麼我getElementById時會得到空值？

我是JS新手，並且正在閱讀Javascript Dom，我試圖找出我書中的一個例子！爲什麼我getElementById時會得到空值？

這裏是我的html代碼

<!DOCTYPE html> 
<html lang ="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Image Gallery</title> 
    </head> 
    <body> 

     <script type = "text/javascript" src="showPic.js"></script> 
<h1>Snapshots</h1> 
     <ul id = "image"> 
     <li> 
      <a href="images/fall.JPG" title = "water display"> Fall</a> 
     </li> 

     <li> 
      <a href="images/sun.JPG" title = "sunshine"> Sunshine</a> 
     </li> 

     <li> 
      <a href="images/tree.jpg" title = "tree"> Green</a> 
     </li> 

     <li> 
      <a href="images/yellow.JPG" title = "yellow sun">Filter</a> 
     </li> 

     </ul> 
     <img id = "placeholeder" src="images/rise.jpg" alt = "my image gallery"/> 
     <p id="description"> Choose an image</p> 
    </body> 
</html>

這裏是我的JavaScript代碼

function showPic(whichPic) { 
    var source = whichPic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholeder"); 
    placeholder.setAttribute("src", source); 
    description.firstChild.nodeValue = text; 
    } 

    var text = whichPic.getAttribute("title"); 
    var description = document.getElementById("description"); 
    function perpareGallery() { 
     var gallery = document.getElementById("image"); 
     var links = gallery.getElementsByTagName("a"); 

     for(var i = 0 ; i<links.length; i++) { 
      links[i].onclick = function() { 
       showPic(this); 
       return false; 
      } 
     } 
    }

我的代碼didnt正從ID =圖像什麼。我檢查了很多次，不知道什麼是錯誤的......

來源

2017-09-29 BING Le

可能需要document.ready – rjustin

'showPic'函數的關閉'}'在哪裏？現在'perpareGallery'看起來像是在'showPic'函數中。 – llama

整個代碼？ – soft87

似乎沒有代碼實際運行perpareGallery()函數。

解決該問題後，如果在HTML中的元素（如a元素）被解析並呈現之前運行perpareGallery()，則它可能仍不起作用。所以，你可能想要做這樣的事情：

window.onload = prepareGalery;

雖然有辦法更好的方法來建立的事件，這將運行函數中的所有HTML解析後。如何追查您的問題

來源

2017-09-29 22:56:31 Rednael

我剛剛發現我想念粘貼兩行，其中包括} showPic（） –

兩個建議：

1）所有瀏覽器都有一個所謂的JavaScript控制檯。它向你展示了你的代碼的所有語法錯誤。對於Firefox和鉻鍵盤快捷鍵F12 轉其開/關

如果你運行你的代碼，並打開JavaScript控制檯，你會看到這樣的錯誤：

ReferenceError: whichPic is not defined

在您的例子，它看起來好像行var text = whichPic.getAttribute("title");屬於功能showPic(whichPic)，但它不。

2）你應該格式化你的代碼不要迷路。格式化您當前的代碼：

function showPic(whichPic) { 
    var source = whichPic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholeder"); 
    placeholder.setAttribute("src", source); 
    description.firstChild.nodeValue = text; 
} 

var text = whichPic.getAttribute("title"); 
var description = document.getElementById("description"); 

function perpareGallery() { 
    var gallery = document.getElementById("image"); 
    var links = gallery.getElementsByTagName("a"); 

    for(var i = 0 ; i<links.length; i++) { 
    links[i].onclick = function() { 
     showPic(this); 
     return false; 
    } 
    } 
}

如果你看看現在的格式化代碼，它不再看起來好像whichPic是showPic(whichPic)內而外的範圍使用。這個錯誤非常有意義。

您可能需要在使用之前將其移動到功能之內。

來源

2017-09-29 23:12:53 dahrens

謝謝！現在我知道如何調試我的代碼了！ –

爲什麼我getElementById時會得到空值？

回答

相關問題