图像交换 - 未捕获的类型错误：无法将属性“src”设置为 null

Question

I'm working through the textbook for a class as I usually do for practice.我正在为一门课学习教科书，就像我通常做的练习一样。 I'm currently working on an image swapping page where clicking on a thumbnail "swaps" out the main image.我目前正在处理图像交换页面，单击缩略图“交换”主图像。 The images when clicked become enlarged as if it were a link to another web page.单击时图像会被放大，就好像它是到另一个网页的链接一样。 My code is exactly as it is in the book but I get an error.我的代码与书中的代码完全一样，但出现错误。 The code is:代码是：

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();

};` };`

The error is thrown at imageNode.src = link.getAttribute("href");错误在imageNode.src = link.getAttribute("href");处抛出imageNode.src = link.getAttribute("href"); My HTML is:我的 HTML 是：

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

Why am I getting this error?为什么我收到这个错误？

Answer 1

Answer first,then lecture... the mistake in your code is,先回答，然后讲课……你的代码中的错误是，

<img id="main-image" src="images/photo3.jpg" alt=""> // from html var imageNode = $("main_image"); // from javascript

id's don't match, its a simple typo, main_image (never equals) main-image id 不匹配，这是一个简单的错字， main_image (never equals) main-image

either use <img id="main-image" src="images/photo3.jpg" alt=""> // from html var imageNode = $("main-image"); // from javascript要么使用<img id="main-image" src="images/photo3.jpg" alt=""> // from html var imageNode = $("main-image"); // from javascript <img id="main-image" src="images/photo3.jpg" alt=""> // from html var imageNode = $("main-image"); // from javascript

or或者

<img id="main_image" src="images/photo3.jpg" alt=""> // from html var imageNode = $("main_image"); // from javascript

Now to understand such typos, pay attention to your code and variables... happy coding :)现在要了解这些拼写错误，请注意您的代码和变量...快乐编码 :)

图像交换 - 未捕获的类型错误：无法将属性“src”设置为 null

问题描述

1 个解决方案

解决方案1
1 2020-02-19 05:20:38

图像交换 - 未捕获的类型错误：无法将属性“src”设置为 null

问题描述

1 个解决方案

解决方案1 1 2020-02-19 05:20:38

解决方案1
1 2020-02-19 05:20:38