点击更改背景图片不起作用

Question

所以我有三个按钮。我想通过单击按钮之一来更改横幅的背景图像。我试图通过下面提供的功能对其进行设置。它应该按id来使用按钮，并更改类标题的背景图像。我究竟做错了什么 ？如果它改变了一些东西，我也正在使用sass。

这是代码：

function changebackground() {

    button1.addEventListener('click', function() {

        document.getElementsByClassName('banner').style.bacgkroundImage = "url(".. / images / banner - img.png ")";

    })

    button2.addEventListener('click', function() {

        document.getElementsByClassName('banner').style.bacgkroundImage = "url(".. / images / banner - img2.png ")";

    })

    button3.addEventListener('click', function() {

        document.getElementsByClassName('banner').style.bacgkroundImage = "url(".. / images / banner - img3.png ")";

    })

}

.banner {

  background-image: url("https://via.placeholder.com/150 ");

  background-repeat: no-repeat;

  background-size: cover;

  width: 100%;

  height: 570px;

  z-index: 1;

  padding-top: 50px;

  position: relative;

}

.banner .carousel {

  top: 50%;

  position: absolute;

}

.banner .carousel .button {

  height: 10px;

  width: 10px;

  border: 2px solid white;

  margin: 10px;

  border-radius: 9px;

  position: relative;

}

.banner .carousel .button .first {

  position: absolute;

  margin-top: 3px;

  margin-left: 3px;

  height: 4px;

  width: 4px;

  border-radius: 5px;

  background: #fea100;

}

.banner .banner-text {

  font-family: "Playfair Display";

  font-weight: 700;

  position: absolute;

  color: #fff;

  left: 15%;

  top: 40%;

  z-index: 2;

}

}

<div class="banner">

    <div class="carousel">

        <div class="button" id="button1">

            <div class="first"></div>

        </div>

        <div class="button" id="button2">

            <div class="second"></div>

        </div>

        <div class="button" id="button3">

            <div class="third"></div>

        </div>

    </div>

    <div class="banner-text">

        <h1>Test your fav dish</h1>

        <h2>from <span>luxury restaurent</span></h2>

    </div>

</div>

Answer 1

该函数document.getElementsByClassName('banner')返回一个数组，因此您无法应用样式属性其次，您的代码中存在语法错误"url(".. / images / banner - img.png ")"，更改为："url('../images/banner-img.png')"要解决第一个问题，请尝试以下操作：var banners = document.getElementsByClassName('banner');//The following code needs to be inside the first click function, change it for the other two clicksvar&nbsp; i = 0;for(i = 0; i < banners.length; i++){&nbsp; &nbsp; banners[i].style.backgroundImage = "url('../images/banner-img.png')";}最后，您必须致电changebackground()使其生效