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

Question

I have setup a click event in Javascript which is not working for some reason, the image just isn't changing and there are no errors in the console. The image src is meant to change when clicking the html icon.

Here is the javascript:

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

Here is the leftArrow function:

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);

  } 

Here is where the images are stored:

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

Here is where the DOM strings are stored:

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

Lastly, here is the relevant 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'
}
  });
 });