Question

我刚开始学习JavaScript。我只是想构建一个图像轮播，但是我的第一行出错：

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>

Answer 1

发生错误是因为＆＃34;图像＆＃34;调用方法时，尚未加载对象。

你需要运行＆＃34; changeImage（）＆＃34; DOM加载后的方法，就像在body onload事件中一样，

<body onload="changeImage();">

或者在主体中最后添加脚本标记，确保加载图像对象。

Answer 2

问题是因为甚至在加载目标元素之前调用脚本中的document.getElementById("image")会返回undefined / null。然后在.getAttribute("src") / undefined对象上调用已链接的null。

许多可能的解决方案之一是在页面加载后执行该功能。将脚本中的代码更改为：

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

hello.js中的

将使页面在页面完全加载后执行。

其他答案涵盖了其他几种方法。

Answer 3

尝试这种方式：

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

或者使用jQuery：

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

Answer 4

因为您在HTML页面的head部分链接了JavaScript文件。在这种情况下，在HTML和JavaScript代码之前加载的JS文件无法找到id为image的标记。因此，请在HTML页面的底部编写脚本标记。

Answer 5

原因可能与img元素中缺少{{1}}属性有关。

未捕获的TypeError：无法读取属性＆＃39; getAttribute＆＃39;为null

5 个答案: