简体   繁体   中英

click event not working when clicking html icon

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>
//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'
}
  });
 });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM