如何更改背景图像

Question

我是JS的初学者，正在尝试创建一个简单的函数，在该按钮上单击按钮，背景图片发生更改，但是它不起作用（我试图重新创建一个更简单的图像滑块）。我不明白为什么。

这是我的JS。我使用了绝对链接，希望它可以解决问题和警报，以查看if / else语句是否有效。

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");

btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

function whenClicked() {
if (btnLeft.clicked) {
document.getElementById("img2").style.backgroundImage = 
"url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixlib=rb- 
1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego-jimenez-A-NVHPka9Rk-unsplash.jpg')";
} else alert("no click!");

}

这是我的HTML：

<div class="slide-container">

    <div class="slide" id="img1">
       <button id="btn-left"> <i class="fas fa-arrow-circle-left fa-3x " ></i></button>
        <button id="btn-right"><i class="fas fa-arrow-circle-right fa-3x " ></i></button>
    </div>

    <div class="slide" id="img2">

    </div>

</div>

这是相关的CSS。

 .slide-container {
display: flex;  
 }

.slide:nth-child(1) {
background-image: url(../img/img1.jpg);
height: 789px;
width: 100%; 
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.slide:nth-child(2) {
background-image: url(../img/img2.jpg);
height: 789px;
width: 100%; 
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

#btn-left {
position: absolute;
top: 400px;
}
#btn-right {
position: absolute;
left: 1380px;
top: 400px;
}

感谢任何帮助，我已经疯了几个小时了！谢谢。

Answer 1

您的问题听起来好像是backgroundImage部分在哪里，但我似乎无法重复（请参见下面的工作片段）。

但是我确实对if (btnLeft.clicked)遇到了麻烦...我不确定Element.clicked是不是一件事情...至少我以前从未见过。当我将其更改为e.currentTarget===btnLeft时，它才起作用。 （有关更多信息，请参见Event.currentTarget。）>

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");

btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

function whenClicked(e) {
  if (e.currentTarget === btnLeft) {
    document.getElementById("img2").style.backgroundImage =
      "url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&dl=diego-jimenez-A-NVHPka9Rk-unsplash.jpg')";
  } else alert("no click!");

}
.slide-container {
  display: flex;
}

.slide:nth-child(1) {
  background-image: url(../img/img1.jpg);
  height: 789px;
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide:nth-child(2) {
  background-image: url(../img/img2.jpg);
  height: 789px;
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#btn-left {
  position: absolute;
  top: 400px;
}

#btn-right {
  position: absolute;
  left: 1380px;
  top: 400px;
}
<div class="slide-container">

  <div class="slide" id="img1">
    <button id="btn-left"> <i class="fas fa-arrow-circle-left fa-3x " >left</i></button>
    <button id="btn-right"><i class="fas fa-arrow-circle-right fa-3x " >right</i></button>
  </div>

  <div class="slide" id="img2">

  </div>

</div>