Javascript 图像交换--未捕获的TypeError:无法将属性“src”设置为null_Javascript_Html_Css

Javascript 图像交换--未捕获的TypeError:无法将属性“src”设置为null

javascript html css

Javascript 图像交换--未捕获的TypeError:无法将属性“src”设置为null,javascript,html,css,Javascript,Html,Css,我正在为一堂课复习课本，就像平时练习一样。我目前正在做一个图像交换页面，点击缩略图可以交换出主图像。单击时图像会放大，好像它是指向另一个网页的链接。我的代码与书中的代码完全相同，但我得到了一个错误。代码是： var $ = function(id){ return document.getElementById(id); }; window.onload = function(){ var listNode = $("image_list"); var captionNode = $("cap

我正在为一堂课复习课本，就像平时练习一样。我目前正在做一个图像交换页面，点击缩略图可以交换出主图像。单击时图像会放大，好像它是指向另一个网页的链接。我的代码与书中的代码完全相同，但我得到了一个错误。代码是：

var $ = function(id){
return document.getElementById(id);
};

window.onload = function(){
var listNode = $("image_list");
var captionNode = $("caption");
var imageNode = $("main_image");

var imageLinks = listNode.getElementsByTagName("a");

// process image links
var i, image, linkNode, link;
for (i = 0; i < imageLinks.length; i++){
    linkNode = imageLinks[i];

    // preload image
    image = new Image();
    image.src = linkNode.getAttribute("href");

    // attach event handler
    linkNode.onclick = function(evt){
        link = this;  // "this" is the link that was clicked

        // set new image and caption
        // the image selected is the "href" and the caption is the title of each image link
        imageNode.src = link.getAttribute("href");
        captionNode.firstChild.nodeValue = link.getAttribute("title");

        // cancel the default action of the event
        if (!evt){
            evt = window.event;
        }
        if (evt.preventDefault){
            evt.preventDefault();
        }else{
            evt.returnFalse = false;
        }
    };
}
// set focus on first image link
imageLinks[0].focus();

为什么我会犯这个错误？

先回答，然后讲课。。。代码中的错误是

//来自html var imageNode=$main_image；//来自javascript

id不匹配，这是一个简单的打字错误，主图像永远不等于主图像

任用 //从html var imageNode=$main image；//来自javascript

或

//来自html var imageNode=$main_image；//来自javascript

现在要理解这些打字错误，请注意您的代码和变量。。。快乐编码：

Change var imageNode=$main\u image；到var imageNode=$main image；类似地，更改var listNode=$image\u list；to var listNode=$image\u list；并更改var captionNode=$caption；to var captionNode=$caption；此外，它应该是主图像，而不是带有破折号的主图像，而不是下划线。@Kenny他编写了一个自定义函数来模拟jquery操作，请记下，他不需要用a来更改它，以使其正常工作，这是一个简单的输入错误，如@Titus所述。谢谢！我哥哥是计算机科学专业的学生，他告诉我像这样的打字错误最终会发生。是的，它们是无法避免的，时刻注意它们，不总是错误很大。。。我们非常想念这样的小事情。快乐的编码

<body>
        <h1>Image Swap With JavaScript</h1>
        <p>Click on an image to enlarge.</p>
        <ul id="image_list">
            <li><a href="images/photo1.jpg" title="Golden Gate">
                <img src="thumbnails/thumb1.jpg" alt=""></a></li>
            <li><a href="images/photo2.jpg" title="Rocky Coast">
                <img src="thumbnails/thumb2.jpg" alt=""></a></li>
            <li><a href="images/photo3.jpg" title="Ocean Side">
                <img src="thumbnails/thumb3.jpg" alt=""></a></li>
        </ul>
        <h2 id="caption">Ocean Side</h2>
        <p><img id="main-image" src="images/photo3.jpg" alt=""></p>
    </body>