Question

我的javascript文件出现了一个简单的错误（无法将属性'src'设置为null）

我试图在1秒内改变一次图像。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-2.1.0.js"></script>
    <script type="text/javascript" src="function.js"></script>

    </head>
<body >
<div class='bannerbg'>
    <img src="img/2.jpg" alt="">
    <div class='slider'></div>
</div>


</body>
</html>

这是我的JavaScript文件：

images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg"
);  


function left() //this function change the index of the array of images
{
    images.push(images.shift());

}

function change(){

    i=document.querySelector("#bannerbg img");

    i.src=images[0];
}

setInterval("left(); change()",1000);

Answer 1

试试这个：

document.querySelector(".bannerbg img");

您的div已将“bannerimg”作为课程，因此您需要一段时间告诉querySelector寻找课程。

#用于查找id属性，如下所示：

<div id='bannerbg'>
    <img src="img/2.jpg" alt="">
    <div class='slider'></div>
</div>

但是，为了获得最大的兼容性，我建议在图像元素中添加一个id：

<img src="img/2.jpg" alt="" id="myImage">

然后您可以使用document.getElementById("myImage")来访问特定元素 getElementById是受支持的DOM访问功能之一，它甚至可以在5.5版本的IE版本上运行。

另一方面：

您的setInterval来电有点bad practice。（参见“代码”参数中的说明）

更好的选择是这样称呼：

setInterval(function(){
    left();
    change();
},
1000);

Answer 2

您的选择器显示为空，因此以下尝试设置src失败。

在这一行

<div class='bannerbg'>

您实际上向class声明<div>而不是ID。但是，在选择器中，您使用#，它引用了ID。因此，要么将选择器更改为使用.作为类选择器

i=document.querySelector(".bannerbg img");

或更改HTML以设置id而不是class

<div id='bannerbg'>

Answer 3

嘿你使用id选择器而不是类选择器＃= id。 =班级。这意味着你不要选择任何元素，因此错误。

尝试

document.querySelector(".bannerbg img");

Noob JavaScript错误（无法设置null的属性'src'）

3 个答案: