javascript - 单击 html 图标时单击事件不起作用

Question

我在 Javascript 中设置了一个点击事件，但由于某种原因该事件不起作用，图像只是没有改变，并且控制台中没有错误。单击 html 图标时图像 src 会发生变化。

这是 JavaScript:

document.querySelector(".left").addEventListener("click", () => {
            leftArrow();
        });

这是 leftArrow 函数:

leftArrow: () => {
      if (document.querySelector(DOMStrings.characterImg).src === characters[0]) {
        document.querySelector(DOMStrings.characterImg).classList.add("boris");
        document.querySelector(DOMStrings.characterImg).src = characters[1];
        const el = document.querySelector(DOMStrings.characterImg);
        console.log(el);
      } else if (document.querySelector(DOMStrings.characterImg).src === characters[1]) {
        document.querySelector(DOMStrings.characterImg).classList.remove("boris");
        document.querySelector(DOMStrings.characterImg).src = characters[0];

        const el = document.querySelector(DOMStrings.characterImg);
        console.log(el);

  } 

这是图像存储的位置:

const characters = ["Resources/Images/trump.png", "Resources/Images/boris.png"];

这里是 DOM 字符串的存储位置:

const DOMstrings = {
    characterImg: ".character-img"
}

最后，这是相关的html:

<div class="character-select">
                <ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
                <ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
                <img class="character-img" src="Resources/Images/trump.png">        
            </div>

Answer 1

//below HTML part
/*
<div class="character-select">
<ion-icon class="icon" id='left' name="arrow-dropleft-circle"></ion-icon>
                <ion-icon class="icon" id='right' name="arrow-dropright-circle"></ion-icon>
                <img class="character-img" src="Resources/Images/trump.png">        
            </div>
*/
-----------------------------------------------------------------------
//javascript part
document.querySelectorAll(".icon").forEach(function(item,index){
 item.addEventListener('click',function(event){

if(event.targer.id='right'){
document.querySelector('.character-img').src='your source that you want to set'
}else if(event.targer.id='left'){
document.querySelector('.character-img').src='your source that you want to set'
}
  });
 });