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
}
}