如何更改背景图片

Question

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

这是我的 JS。我已经使用绝对 link 希望它可以解决问题和警报以查看 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;
}

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

编辑。在 David784 的帮助下，我现在有了这个：

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("img1").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!");
}

并且有效。但是当我尝试为右键添加相同的内容时，例如

function whenClicked(e) {
if (e.currentTarget === btnRight ) {
document.getElementById("img1").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!");
}

左侧按钮停止工作。为什么？

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>

*编辑：为了解决关于 CSS 的评论，这由 CSS Specificity rules 解决。其中指出：

Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

在执行 element.style.backgroundImage 时，这会创建一个内联样式，该样式将被覆盖。（除了我想到的 !important 规则，你几乎不应该使用它）

解决有关将事件传递到事件处理程序的问题：这是使用事件时非常有用的工具，称为 event object

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them.

因此事件对象几乎可以任意命名。您可以将其命名为 e、event、evnt 或其他名称。但是它会让你访问很多非常有用的信息，比如点击的target，点击的x/y坐标等

或者在这种情况下 currentTarget，它与 target 略有不同，让我们可以访问事件处理程序实际附加到的元素。（这里的 target 很可能是 button 标签内的 i 标签。

如何更改背景图片

How to change background image

javascript

if-statement

background-image