Javascript 单击事件侦听器，背景图像不工作

这是我的image1课程。单击此按钮，我想更改背景图像

<li class="sidebar-element">
                    <div class="image1">
                        <i class="fa fa-home" aria-hidden="true"></i> 
                        <span>Image 1</span>
                        <hr>
                        <hr id="second">
                    </div>
                </li>

---

}

当您使用queryselector选择元素时，即使没有与选择器匹配的元素，它也会返回一个HTML集合（节点列表），因此要访问它，您应该像下面这样作为数组元素访问它

var image1=document.queryselectoral（“.image1”）；
image1[0]。addEventListener（“单击”，函数（）{
document.body.style.backgroundImage=“url(https://images.unsplash.com/photo-1582392487150-b0bc00f92e28?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）”；
});

或者您可以像这样使用querySelector

var image1=document.querySelector（“.image1”）；
图1.addEventListener（“单击”，函数（）{
document.body.style.backgroundImage=“url(https://images.unsplash.com/photo-1582392487150-b0bc00f92e28?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）”；
});

使用CSS类和API进行设置，而不是使用内联样式设置背景（通常认为内联样式是最后的选择，因为它很难覆盖，也因为它使呈现的HTML非常混乱）：

document.querySelector（“.image1”）.addEventListener（“单击”，函数（）{
document.body.classList.add（“replacedBodyBackground”）；
});
正文{
字体系列：“开放式Sans”，无衬线；
字号：18px；
字体大小：300；
颜色：白色；
溢出x：隐藏；
身高：100%；
背景：#22222；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
背景图像：url（“https://www.doublemesh.com/wp-content/uploads/2016/06/Paradise-Beach-desktop-wallpaper.jpg");
}
.replacedBodyBackground{
背景图像：url（“https://i.dlpng.com/static/png/3872255-31-beach-backgrounds-psd-jpeg-png-free-premium-templates-beach-png-background-585_329_preview.webp");
}

图1


如果只有一个图像，请使用
querySelector
而不是
queryselectoral
，因为
queryselectoral
返回所有匹配元素的数组。@imvain2
.queryselectoral（）
实际上返回一个HTML集合（节点列表），不是数组。我已将其更改为querySelector，但仍然无法更改背景图像。让我知道我还应该改变什么或者我应该发布更多的代码。我还注意到我在这两个地方都有相同的url，我也更改了它，但仍然没有得到不同的背景图像。
.style.backgroundimage
->
.style.backgroundimage
也尝试过，但没有得到它。我在原始html代码的底部添加了javascript。
.querySelectorAll（）
实际上返回的是html集合（节点列表），而不是数组。而且，即使没有与查询匹配的元素，它也会返回一个空元素。感谢infoI'v将其更改为querySelector，但仍然无法更改背景图像。让我知道我还应该改变什么或者我应该发布更多的代码。我还注意到我在两个地方都有相同的url，我也更改了，但仍然没有得到不同的背景图像。使用backgroundImage加大写字母I，而不是BackgroundImages也尝试过，但没有得到它。我在原始html代码的底部添加了javascript。实际上，我还有一个问题与代码没有太多关系，而是关于引用。我的主要文件（app.js、test.ejs和maintest.css）如下所示：MyProjects/website1/app.js MyProjects/website1/test.ejs MyProjects/website1/views1/maintest.css如果我在我的views目录中创建了一个外部js文件，我将如何在test.ejs文件中引用它？只是想让你们知道，我正在使用GoormIDE，这是一个云编程工具。@CuriousLearner我对GormIDE一无所知，但应该会有所帮助。
<script type="text/javascript">
        var image1 = document.querySelectorAll(".image1");
image1.addEventListener("click", function(){
            document.body.style.backgroundimage = "url(https://images.unsplash.com/photo-1582392487150-b0bc00f92e28?ixlib=rb-                                   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60)";
        });

body{
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
color: white;
overflow-x: hidden;
height: 100%;
background: #222222;
background-image: url("https://images.unsplash.com/photo-1582392487150-b0bc00f92e28?ixlib=rb-                                   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
background-repeat: no-repeat;
background-size: cover;
position: relative;