admin管理员组

文章数量:1194541

I just started learning JavaScript. I just want to build an image carousel but I get an error at my first line:

Uncaught TypeError: Cannot read property 'getAttribute' of null

js:

function changeImage(){
    var imageSrc=document.getElementById("image").getAttribute("src");
}
changeImage();

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="hello.js"></script>
    <title></title>
</head>
<body>
    <div id="button_left">
        <img id ="left" src="left.png">
    </div>
    <div id="button_right">
        <img id ="right" src="right.png">
    </div>
    <div class="container">
        <img id ="image" src="1.jpg">
    </div>
    <div id="result"></div>
</body>
</html>

I just started learning JavaScript. I just want to build an image carousel but I get an error at my first line:

Uncaught TypeError: Cannot read property 'getAttribute' of null

js:

function changeImage(){
    var imageSrc=document.getElementById("image").getAttribute("src");
}
changeImage();

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="hello.js"></script>
    <title></title>
</head>
<body>
    <div id="button_left">
        <img id ="left" src="left.png">
    </div>
    <div id="button_right">
        <img id ="right" src="right.png">
    </div>
    <div class="container">
        <img id ="image" src="1.jpg">
    </div>
    <div id="result"></div>
</body>
</html>
  • javascript
Share Improve this question edited Sep 12, 2015 at 18:42 user1106925 asked Sep 12, 2015 at 18:33 fiddletagfiddletag 811 gold badge1 silver badge2 bronze badges 1
  • 3 you should move the script tag at the end of the body tag or run the code in hello.js on the onload event so it runs after the page is rendered. As it is now the page is not yet rendered when the code in hello.js is interpreted. – toskv Commented Sep 12, 2015 at 18:35
Add a comment  | 

6 Answers 6

Reset to default 6

The problem is because document.getElementById("image") in your script is called even before the targetted element is loaded which returns undefined/null. And then the chained .getAttribute("src") is called on an undefined/null object.

One of the many possible solutions is to execute the function after page loads. Change the code in your script to below:

window.onload = function () { var imageSrc=document.getElementById("image").getAttribute("src"); }

in hello.js will make the script execute after the page has loaded completely.

Other answers cover several other ways to approach this.

The error occurs because the "image" object is not yet loaded when the method gets called.

You need to run the "changeImage()" method after DOM is load, like in the body onload event,

<body onload="changeImage();">

or you add the script tag last in the body making sure the image object is loaded.

Try this way:

var imageSrc = document.querySelectorAll('image[id=your-image-id]')[0].getAttributeNode("src").value;

Or use jQuery:

var imageSrc = $('image[id="your-image-id"]').attr('src');

Because you linked your JavaScript file in the head section of your HTML page. In this case, JS file loaded before HTML and JavaScript code cannot find a tag with id of image. So, write your script tag at the bottom of the HTML page.

Try to include your script tag at the end i.e just before the body tag closes. The execution of code happens from top to bottom so as soon as it reaches your script tag which is defined above it doesn't know about the targeted element.

The reason might be related to a missing name attribute in the img element.

本文标签： javascriptUncaught TypeError Cannot read property 39getAttribute39 of nullStack Overflow

版权声明：本文标题：javascript - Uncaught TypeError: Cannot read property &#39;getAttribute&#39; of null - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738507493a2090614.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。