使用javascript在单击时更改多个背景图像

因此，我尝试使用javascript在单击时更改多个背景图像

有人能帮忙吗？我正在尝试通过点击改变多个背景图像，通过这段代码，我得到了两个图像改变，但是在函数updateIndex的某个地方，我不知道如何使它在多个图像中连续

提前多谢

html，
身体{
身高：100%；
宽度：100%；
}
#body.imageOne{
背景图片：url（“first.svg”）；
}
#body.image2{
背景图片：url（“2.svg”）；
}
#body.image3{
背景图片：url（“3.svg”）；
}
#body.imageFour{
背景图片：url（“first.svg”）；
}
var bodyObj，类名，索引；
//所有背景图像，调用它们进行更改
bodyObj=document.getElementById（'body'）；
指数=1；
类名=[
“imageOne”，
"图像二",，
"三",，
"四",，
];
函数updateIndex（）{
如果（索引==0）{
指数=1；
}否则{
指数=1；
指数=2；
}
}
bodyObj.onclick=函数（e）{
e、 currentTarget.className=类名[索引]；
updateIndex（）；
}

将

索引设置为
0


为了循环使用
++索引%className.length


var className=['imageOne'，'imageTwo'，'imageThree'，'imageFour'，]，
指数=0；
函数updateClassName（）{
this.className=className[++索引%className.length]；
}
document.getElementById（'body'）.addEventListener（“单击”，updateClassName）
html，正文{高度：100%；宽度：100%；边距：0；}
#身体{高度：100%；}
#body.imageOne{背景图像：url（//placehold.it/800x600/0bf”）；}
#body.imageTwo{background image:url（//placehold.it/800x600/f0b”）；}
#body.imageThree{背景图像：url（//placehold.it/800x600/b0f”）；}
#body.imageFour{background image:url（//placehold.it/800x600/fb0”）；}
问题是由于
updateIndex（）函数中的逻辑造成的。您只需将
索引设置为
0
，或设置为
1
，然后出于某种原因立即设置
2
。它不会循环

要修复逻辑，只需在每次连续单击时增加
索引
。试试这个：


var bodyObj=document.getElementById（'body'），
指数=1，
className=['imageOne'，'imageTwo'，'imageThree'，'imageFour']；//删除此处的尾随逗号
函数updateIndex（）{
index=++索引%className.length；
}
bodyObj.addEventListener（'click'，函数（e）{
e、 currentTarget.className=类名[索引]；
updateIndex（）；
});
#主体{
高度：250px；
宽度：250px；
}
#body.imageOne{背景图像：url（“https://dummyimage.com/250/000000/ffffff"); }
#body.imageTwo{背景图像：url（“https://dummyimage.com/250/cc0000/000000"); }
#body.imageThree{背景图像：url（“https://dummyimage.com/250/00cc00/000000"); }
#body.imageFour{背景图像：url（“https://dummyimage.com/250/0000cc/000000）；}
请注意设置问题的格式，使其可读。在这种情况下，我已经为你编辑了这个问题