DOM eventlisteners change an images source with a click event

Question

I'm pretty new to DOM eventlisteners and for a project it's imperative we use it!

The idea is to have users click on images out of a list (image-list). their first click is supposed to change the first banner(image)'s source to the chosen/clicked on image, the second click changes the second banner's source....

I'm at a point where i've tried a lotta different things but i'm scratching my head at why it doesn't work. I'd appreciate anyone taking a look and I'd love to hear some feedback/tips to improve things all together in the future, i'm here to learn!

html

<section class="banner">
        <figure>
            <img src="wip.png" alt="1ste favoriet personage" id="gekozenAvatar1">
        </figure>
        <figure>
            <img src="wip.png" alt="2de favoriet personage" id="gekozenAvatar2">
        </figure>
    </section>

    <section class="image-list">
        <img class="list-images" src="blackknight.png" alt="black knight" id="karakter1">
        <img class="list-images" src="drift.png" alt ="drift" id="karakter2">
        <img class="list-images" src="fennix.png" alt="fennix" id="karakter3">
        <img class="list-images" src="firewalker.png" alt="fire walker" id="karakter4">
        <img class="list-images" src="fusion.png" alt="fusion" id="karakter5">
        <img class="list-images" src="hybrid.png" alt="hybrid" id="karakter6">
        <img class="list-images" src="johnwick.png" alt="john wick" id="karakter7">
        <img class="list-images" src="kit.png" alt="kit" id="karakter8">
        <img class="list-images" src="redstrike.png" alt="red strike" id="karakter9">
        <img class="list-images" src="ripley.png" alt="ripley" id="karakter10">
        <img class="list-images" src="rustlord.png" alt="rust lord" id="karakter11">
        <img class="list-images" src="sidewinder.png" alt="side winder" id="karakter12">
    </section>

Javascript (I know somethings could be place more effeciently lol)

 let clickCounter = 1;
 let afbeelding1 = document.getElementById("karakter1");
 let afbeelding2 = document.getElementById("karakter2");
 let afbeelding3 = document.getElementById("karakter3");
 let afbeelding4 = document.getElementById("karakter4");
 let afbeelding5 = document.getElementById("karakter5");
 let afbeelding6 = document.getElementById("karakter6");
 let afbeelding7 = document.getElementById("karakter7");
 let afbeelding8 = document.getElementsById("karakter8");
 let afbeelding9 = document.getElementsById("karakter9");
 let afbeelding10 = document.getElementsById("karakter10");
 let afbeelding11 = document.getElementsById("karakter11");
 let afbeelding12 = document.getElementsById("karakter12");


 let bannerAfbeelding1 = document.getElementById("gekozenAvatar1");
 let bannerAfbeelding2 = document.getElementById("gekozenAvater2");

 afbeelding1.addEventListener('click',bannerFunctie(afbeelding1));
 afbeelding2.addEventListener('click',bannerFunctie(afbeelding2));
 afbeelding3.addEventListener('click',bannerFunctie(afbeelding3));
 afbeelding4.addEventListener('click',bannerFunctie(afbeelding4));
 afbeelding5.addEventListener('click',bannerFunctie(afbeelding5));
 afbeelding6.addEventListener('click',bannerFunctie(afbeelding6));
 afbeelding7.addEventListener('click',bannerFunctie(afbeelding7));
 afbeelding8.addEventListener('click',bannerFunctie(afbeelding8));
 afbeelding9.addEventListener('click',bannerFunctie(afbeelding9));
 afbeelding10.addEventListener('click',bannerFunctie(afbeelding10));
 afbeelding11.addEventListener('click',bannerFunctie(afbeelding11));
 afbeelding12.addEventListener('click',bannerFunctie(afbeelding12));


 
let  bannerFunctie = (afbeelding) =>{

  clickCounter++;
  if (clickCounter == 1){
    bannerAfbeelding1.src = afbeelding.src;
  } else if (clickCounter == 2){
    bannerAfbeelding2.src = afbeelding.src;
  } else if (clickCounter > 2){
    //still working on this
  }
}

Not related to the actual question, but take also a look at [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). — Teemu, Mar 22 '21 at 19:36
Thanks! I did my research on that with bubbling and so on, it's all pretty new to me but I get how "most" of it works — lil benchpress, Mar 22 '21 at 19:50
Event delegation is very useful technique to learn, you can narrow down your code to a couple of lines comparing to what you have now. — Teemu, Mar 22 '21 at 19:56

score 1 · Accepted Answer · answered Mar 22 '21 at 19:32

You have several issues:

You need to re-organize the flow of your code
You misspelled "gekozenAvatar2"
You called bannerFunctie in the click handler assignment

let clickCounter = 1;

const bannerAfbeelding1 = document.getElementById("gekozenAvatar1");
const bannerAfbeelding2 = document.getElementById("gekozenAvatar2"); // ID was misspelled

const bannerFunctie = (e) => {
  const afbeelding = e.target; // Context of current target
  clickCounter++;
  if (clickCounter == 1) {
    bannerAfbeelding1.src = afbeelding.src;
  } else if (clickCounter == 2) {
    bannerAfbeelding2.src = afbeelding.src;
  } else if (clickCounter > 2) {
    //still working on this
  }
}

let afbeelding1 = document.getElementById("karakter1");
let afbeelding2 = document.getElementById("karakter2");
let afbeelding3 = document.getElementById("karakter3");
let afbeelding4 = document.getElementById("karakter4");
let afbeelding5 = document.getElementById("karakter5");
let afbeelding6 = document.getElementById("karakter6");
let afbeelding7 = document.getElementById("karakter7");
let afbeelding8 = document.getElementById("karakter8");
let afbeelding9 = document.getElementById("karakter9");
let afbeelding10 = document.getElementById("karakter10");
let afbeelding11 = document.getElementById("karakter11");
let afbeelding12 = document.getElementById("karakter12");

afbeelding1.addEventListener('click', bannerFunctie); // Do not call as function
afbeelding2.addEventListener('click', bannerFunctie);
afbeelding3.addEventListener('click', bannerFunctie);
afbeelding4.addEventListener('click', bannerFunctie);
afbeelding5.addEventListener('click', bannerFunctie);
afbeelding6.addEventListener('click', bannerFunctie);
afbeelding7.addEventListener('click', bannerFunctie);
afbeelding8.addEventListener('click', bannerFunctie);
afbeelding9.addEventListener('click', bannerFunctie);
afbeelding10.addEventListener('click', bannerFunctie);
afbeelding11.addEventListener('click', bannerFunctie);
afbeelding12.addEventListener('click', bannerFunctie);

.image-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 0.33em;
  grid-column-gap: 0.667em;
}

.list-images {
  border: thin solid grey;
  padding: 0.2em;
}

<section class="banner">
  <figure>
    <img src="wip.png" alt="1ste favoriet personage" id="gekozenAvatar1">
  </figure>
  <figure>
    <img src="wip.png" alt="2de favoriet personage" id="gekozenAvatar2">
  </figure>
</section>

<section class="image-list">
  <img class="list-images" src="blackknight.png" alt="black knight" id="karakter1">
  <img class="list-images" src="drift.png" alt="drift" id="karakter2">
  <img class="list-images" src="fennix.png" alt="fennix" id="karakter3">
  <img class="list-images" src="firewalker.png" alt="fire walker" id="karakter4">
  <img class="list-images" src="fusion.png" alt="fusion" id="karakter5">
  <img class="list-images" src="hybrid.png" alt="hybrid" id="karakter6">
  <img class="list-images" src="johnwick.png" alt="john wick" id="karakter7">
  <img class="list-images" src="kit.png" alt="kit" id="karakter8">
  <img class="list-images" src="redstrike.png" alt="red strike" id="karakter9">
  <img class="list-images" src="ripley.png" alt="ripley" id="karakter10">
  <img class="list-images" src="rustlord.png" alt="rust lord" id="karakter11">
  <img class="list-images" src="sidewinder.png" alt="side winder" id="karakter12">
</section>

You can improve this code by introducing a loop:

let clickCounter = 1;

const bannerAfbeelding1 = document.getElementById("gekozenAvatar1");
const bannerAfbeelding2 = document.getElementById("gekozenAvatar2"); // ID was misspelled

const bannerFunctie = (e) => {
  const afbeelding = e.target; // Context of current target
  clickCounter++;
  if (clickCounter == 1) {
    bannerAfbeelding1.src = afbeelding.src;
  } else if (clickCounter == 2) {
    bannerAfbeelding2.src = afbeelding.src;
  } else if (clickCounter > 2) {
    //still working on this
  }
}

document.querySelectorAll(".list-images").forEach(afbeelding =>
  afbeelding.addEventListener('click', bannerFunctie));

.image-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 0.33em;
  grid-column-gap: 0.667em;
}

.list-images {
  border: thin solid grey;
  padding: 0.2em;
}

<section class="banner">
  <figure>
    <img src="wip.png" alt="1ste favoriet personage" id="gekozenAvatar1">
  </figure>
  <figure>
    <img src="wip.png" alt="2de favoriet personage" id="gekozenAvatar2">
  </figure>
</section>

<section class="image-list">
  <img class="list-images" src="blackknight.png" alt="black knight" id="karakter1">
  <img class="list-images" src="drift.png" alt="drift" id="karakter2">
  <img class="list-images" src="fennix.png" alt="fennix" id="karakter3">
  <img class="list-images" src="firewalker.png" alt="fire walker" id="karakter4">
  <img class="list-images" src="fusion.png" alt="fusion" id="karakter5">
  <img class="list-images" src="hybrid.png" alt="hybrid" id="karakter6">
  <img class="list-images" src="johnwick.png" alt="john wick" id="karakter7">
  <img class="list-images" src="kit.png" alt="kit" id="karakter8">
  <img class="list-images" src="redstrike.png" alt="red strike" id="karakter9">
  <img class="list-images" src="ripley.png" alt="ripley" id="karakter10">
  <img class="list-images" src="rustlord.png" alt="rust lord" id="karakter11">
  <img class="list-images" src="sidewinder.png" alt="side winder" id="karakter12">
</section>

Firstly thanks loads for taking the time to help a student out! Secondly the main takeaway seems to be not to call a function in an eventlistener, didn't know that Your code is definitely a huge help and a huge step up of what i had lol! — lil benchpress, Mar 22 '21 at 19:45

DOM eventlisteners change an images source with a click event

1 Answers1