Javascript 未捕获的类型错误：无法读取 null 的属性“getAttribute”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32542312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'getAttribute' of null
提问by fiddletag
I just started learning JavaScript. I just want to build an image carousel but I get an error at my first line:
我刚开始学习 JavaScript。我只想构建一个图像轮播，但在我的第一行出现错误：
Uncaught TypeError: Cannot read property 'getAttribute' of null
js:
js：
function changeImage(){
var imageSrc=document.getElementById("image").getAttribute("src");
}
changeImage();
html:
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>
回答by Ason
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,
您需要在加载 DOM 后运行“changeImage()”方法，就像在主体 onload 事件中一样，
<body onload="changeImage();">
or you add the script tag last in the body making sure the image object is loaded.
或者您在正文中最后添加脚本标记以确保图像对象已加载。
回答by Fr0zenFyr
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/nullobject.
问题是因为document.getElementById("image")在您的脚本中甚至在加载返回undefined/ 的目标元素之前调用null。然后在/对象.getAttribute("src")上调用链接。undefinednull
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");
}
window.onload = function () {
var imageSrc=document.getElementById("image").getAttribute("src");
}
in hello.jswill make the script execute after the page has loaded completely.
inhello.js将使脚本在页面完全加载后执行。
Other answers cover several other ways to approach this.
其他答案涵盖了解决此问题的其他几种方法。
回答by IT Vlogs
Try this way:
试试这个方法：
var imageSrc = document.querySelectorAll('image[id=your-image-id]')[0].getAttributeNode("src").value;
Or use jQuery:
或者使用 jQuery：
var imageSrc = $('image[id="your-image-id"]').attr('src');
回答by Farzin
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.
因为您在 HTML 页面的 head 部分链接了 JavaScript 文件。在这种情况下，在 HTML 和 JavaScript 代码之前加载的 JS 文件找不到带有图像 id 的标签。所以，在 HTML 页面的底部写下你的脚本标签。
回答by Burak Karaku?
The reason might be related to a missing nameattribute in the imgelement.
原因可能与元素中缺少的name属性有关img。
