Javascript Onclick函数中的Onclick

我有一个显示模态的基本问题。一切正常，但只有第二次点击。我确信，我在js代码中有一些错误。你能帮我吗

HTML代码：

    <div class="flex flex-col lg:flex-row justify-center px-3 lg:px-0">
     <div class="pb-3 lg:pb-0 lg:p-5 cursor-pointer">
      <img onclick="showImage('planek1')" id="planek1" src="assets/imgs/planek1.jpg" alt="">
     </div>
     <div class="cursor-pointer lg:p-5">
      <img onclick="showImage('planek2')" id="planek2" src="assets/imgs/planek2.jpg" alt="">
     </div>
    </div>
    <div id="myModal" class="modal">
     <span class="close">&times;</span>
     <img class="modal-content" id="img01">
     <div id="caption"></div>
    </div>

---

尝试删除

onclick=“showImage（'planek2'）”

，为元素提供一个

class=“triggers modal”

，然后编写以下JavaScript：

    function showImage(id) {
     const modal = document.getElementById("myModal");
     const img = document.getElementById(id);
     const modalImg = document.getElementById("img01");
     img.onclick = function () {
      modal.style.display = "block";
      modalImg.src = this.src;
    };
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
     modal.style.display = "none";
    };
   }

---

此代码定义了每个元素的模态行为，这些元素具有

触发器模态

类名，而不是不合适的

onclick

事件。

尝试删除

onclick=“showImage（'planek2'）”

，给元素一个

class=“triggers modal”

，并编写以下JavaScript:

    function showImage(id) {
     const modal = document.getElementById("myModal");
     const img = document.getElementById(id);
     const modalImg = document.getElementById("img01");
     img.onclick = function () {
      modal.style.display = "block";
      modalImg.src = this.src;
    };
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
     modal.style.display = "none";
    };
   }

---

此代码定义了每个元素的模态行为，这些元素具有

触发器模态

类名，而不是不合适的

onclick

事件。

您的事件侦听器注册了另一个事件侦听器，这是为什么？我想这是一个问题-我只想对两个不同的图片使用一个函数，因为他们在做相同的事情好主意，问题是你不想在点击事件上执行该函数，请看我的回答你的事件监听器注册了另一个事件监听器，为什么？我想有个问题-我只想对两个不同的图片使用一个函数，因为他们在做相同的事情好主意，问题是您不想在单击事件上执行该函数，请查看我的答案