如何更改背景图片

我是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;
}

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

编辑。在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!");
}

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