javascript - 单击更改背景图像不起作用

Question

所以我有三个按钮。我想通过单击其中一个按钮来更改横幅的背景图像。我试图用我在下面给你的功能来设置它。它应该按 id 获取按钮并更改类(class)横幅的背景图像。我究竟做错了什么 ？如果它改变了什么，我也会使用 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

您的代码中存在一些错误:

• 您没有调用负责附加事件处理程序的方法 changebackground。如果不先调用此方法，您的事件处理程序将永远不会执行
• getElementsByClassName 返回一个数组，因此您必须使用 [0] 访问以获取 div.banner 元素
• 拼写错误 bacgkroundImage 应该是 backgroundImage
• "url("../images/banner - img3.png")" 应该是 "url('../images/banner - img3.png')"

function changebackground() {
    document.getElementById('button1').addEventListener('click', function() {
      document.getElementsByClassName('banner')[0].style.backgroundImage = "url('https://via.placeholder.com/150/0000FF/808080')";
        
    })
    button2.addEventListener('click', function() {
        document.getElementsByClassName('banner')[0].style.backgroundImage = "url('https://via.placeholder.com/150/FF0000/FFFFFF')";
    })
    button3.addEventListener('click', function() {
        document.getElementsByClassName('banner')[0].style.backgroundImage = "url('https://via.placeholder.com/150/FFFF00/000000')";
    })
}

changebackground();

.banner {
  background-image: url("https://via.placeholder.com/150 ");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 270px;
  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>