Question

为什么我 getElementById 时得到的是 null？

2017-09-29

59

javascript

我是 JS 新手，正在阅读 Javascript Dom，正在尝试理解书中的一个示例！

这是我的 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;
            }
        }   
    }

我的代码没有从 id = image 中获取任何内容。我检查了很多次都不知道哪里出了问题……

Answer 1

似乎没有实际运行 perpareGallery() 函数的代码。

修复该问题后，如果在解析和呈现 HTML 中的元素（如 a 元素）之前运行 perpareGallery() ，它可能仍然不起作用。因此，您可能需要执行类似以下操作：

window.onload = prepareGalery;

尽管有更好的方法来设置事件，但这会在解析所有 HTML 后运行您的函数。

Answer 2

关于如何追踪您的问题的两条建议：

1) 所有浏览器都有所谓的 javascript 控制台 。它会显示代码中的所有语法错误。对于 Firefox 和 Chromium，键盘快捷键 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) 内部使用，而是在范围之外。这个错误完全合理。

您可能希望在使用它之前将其移到函数内部。