Javascript DOM eventlisteners通过单击事件更改图像源

我是DOM eventlisteners的新手，对于一个项目来说，我们必须使用它

其想法是让用户从列表（图像列表）中单击图像。他们的第一次点击应该将第一条横幅（图像）的源更改为所选/点击的图像，第二次点击将更改第二条横幅的源

我已经尝试了很多不同的东西，但我对它为什么不起作用感到困惑。我很感激任何人来看看，我很想听到一些反馈/提示，以便将来一起改进，我在这里学习

html

---

您有几个问题：

您需要重新组织代码流

你拼错了“gekozenAvatar2”

您在单击处理程序分配中调用了

bannerfuncie

让clickCounter=1；
const bannerAfbeelding1=document.getElementById（“gekozenAvatar1”）；
const bannerAfbeelding2=document.getElementById（“gekozenAvatar2”）；//身份证拼错了
const BannerFuncie=（e）=>{
const afbeelding=e.target；//当前目标的上下文
单击计数器++；
如果（单击计数器==1）{
bannerAfbeelding1.src=afbeelding.src；
}否则如果（单击计数器==2）{
bannerAfbeelding2.src=afbeelding.src；
}否则，如果（单击计数器>2）{
//还在做这个吗
}
}
设afbeelding1=document.getElementById（“karakter1”）；
设afbeelding2=document.getElementById（“karakter2”）；
设afbeelding3=document.getElementById（“karakter3”）；
设afbeelding4=document.getElementById（“karakter4”）；
设afbeelding5=document.getElementById（“karakter5”）；
设afbeelding6=document.getElementById（“karakter6”）；
设afbeelding7=document.getElementById（“karakter7”）；
设afbeelding8=document.getElementById（“karakter8”）；
设afbeelding9=document.getElementById（“karakter9”）；
设afbeelding10=document.getElementById（“karakter10”）；
设afbeelding11=document.getElementById（“karakter11”）；
设afbeelding12=document.getElementById（“karakter12”）；
afbeelding1.addEventListener（'click'，bannerfuncie）；//不作为函数调用
afbeelding2.添加了EventListener（'click'，bannerFunctie）；
afbeelding3.添加了EventListener（'click'，bannerFunctie）；
afbeelding4.添加了EventListener（'click'，bannerFunctie）；
afbeelding5.添加了EventListener（'click'，bannerFunctie）；
afbeelding6.添加了EventListener（'click'，bannerFunctie）；
afbeelding7.添加了EventListener（'click'，bannerFunctie）；
afbeelding8.添加了EventListener（'click'，bannerFunctie）；
afbeelding9.添加了EventListener（'点击'，横幅功能）；
afbeelding10.添加了EventListener（“点击”，横幅功能）；
afbeelding11.添加了EventListener（“点击”，横幅功能）；
afbeelding12.添加了EventListener（'click'，bannerFunctie）
。图像列表{
显示：网格；
网格模板列：重复（3，1fr）；
网格行间距：0.33em；
栅柱间隙：0.667em；
}
.列出图像{
边框：薄实灰色；
填充：0.2米；
}

与实际问题无关，但请看一看。谢谢！我用冒泡等方法对此进行了研究，这对我来说都是新鲜事，但我知道“大多数”是非常有用的技术，可以学习，你可以将代码缩小到现在的几行。我花了一些时间，这绝对是有帮助的，谢谢！首先，感谢您抽出时间帮助一位学生！其次，主要的收获似乎不是在eventlistener中调用函数，我不知道你的代码绝对是一个巨大的帮助，是我所拥有的一个巨大的进步，哈哈！
<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>

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