Question

我是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中的元素（如perpareGallery()元素）之前运行a，它可能仍然无效。所以，你可能想做类似的事情：

window.onload = prepareGalery;

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

Answer 2

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

1）所有浏览器都有一个所谓的 javascript控制台。它向您显示代码的所有语法错误。对于firefox和chrome，键盘快捷键 F12 将其打开/关闭

如果您运行代码并打开javascript控制台，您将看到此错误：

ReferenceError: whichPic is not defined

在您的示例中，看起来行var text = whichPic.getAttribute("title");属于函数showPic(whichPic)，但它不属于。{/ p>

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)内部使用，而是在范围之外。这个错误非常有意义。

您可能希望将其移至功能内部，然后使用它。

为什么在getElementById时我得到null？

2 个答案: