JavaScript在HTML中保持图像更改

我想通过点击按钮用Javascript设置CSS规则来更改容器的背景图像

这是可行的，但图像几乎立即变回原来的状态。有没有办法保留这些变化

HTML:

---

首先：这几乎不可能工作，因为没有容器div。 第二：你不需要四种不同的功能来让它工作。就这样做吧：

function changeBackgroundImage(id){ 
   var d = document.getElementById("container"); 
   d.className = "image"+id;
}

#container.image1{
 background-image: url('pathtoimage');
}

现在，您可以通过以下操作在HTML中调用它： onclick=changeBackgroundImageidofyourtype；返回false

然后添加一个新的CSS类，该类包含如下图像：

function changeBackgroundImage(id){ 
   var d = document.getElementById("container"); 
   d.className = "image"+id;
}

#container.image1{
 background-image: url('pathtoimage');
}

等等

---

这里有一个更简单的选择：

var container=document.getElementById'container'， buttons=document.getElementsByClassName'roundbutton'； forvar i=0，l=buttons.length；i它能工作吗？这是一个奇迹，因为我在这里没有看到任何id容器的元素。它不会变回，它会重新加载页面，因为您单击了一个链接。为了防止这种情况，请在每个函数的末尾添加return false；顺便说一句，它可以在单个函数中打开。这非常有用。非常感谢。很抱歉，我离开了容器分区外。但似乎存在一个问题，即图像似乎放置在彼此的顶部，而您无法更改回以前的图像。您到底更改了什么？我再次尝试了您的代码，并尝试自己编辑它，但它对我无效。