Question

我是Java的新手，我想创建一个滑块，以根据纯JS中另一个元素的src更改其背景图像。这是一段代码：

x = 1;
function image2() {
    var x = document.getElementById("imagecounter").textContent;
    var image2 = document.getElementById("image2").src;
    var slider = document.getElementById("slider");
    if (x == 2){
        slider.style.imageBackground = "url('image2');"} 
    }

该代码的目的是建立一个控制幻灯片的数字，当数字变化时，带有src元素的图像将与div #slider的背景图像交换。

完整代码：https://codepen.io/lucaslg20/pen/BeNGzv/

Answer 1

您好像弄乱了backgroundImage样式的分配：

应该是：

if (x == 2){
  slider.style.backgroundImage = "url('" + image2 + "')";
}

您需要正确地将image2的值连接。

此外，我还检出了Codepen HTML。您正在寻找： document.getElementsByClassName("slider")[0]

不是

document.getElementById("slider")

表示变量“ slider”。

Answer 2

这里有两个主要问题：

1-您的滑块元素具有类别的滑块而不是ID，因此getElementbyId("slider")找不到它并返回null。

2-此行：

slider.style.imageBackground = "url('image2');"

没有称为imageBackground的属性，它是backgroundImage，或者只是background（都起作用）。
"url('image2')"将返回字符串“ image2”，而不是变量的值。您可以将其替换为：

。

"url('" + image2 + "')"

或通过

`url('${image2}')`.

如何为另一个元素的背景图像分配src属性？

2 个答案: