функция onclick работает только после второго клика

Question

У меня есть (onclick) код функции для просмотра изображений, код работает отлично, проблема в том, что он работает, когда я нажимаю только второй раз.Я не могу понять, в чем проблема, пожалуйста, помогите мне решить эту проблему.Я прикрепил код ниже ..

<script type="text/javascript">

        function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                img.onclick = function ()
                {
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }
        }
    </script>

<span>
      <img src="<?php echo $u_pimg; ?>" alt="" class="newsize" id="myImg<?php echo $p_id; ?>" onclick="showimage(<?php echo $p_id; ?>)">
    enter code here
</span>

Answer 1

Непонятно, что делает ваш код, потому что вы предоставляете только небольшую его часть.Но у вас определенно есть абсолютно ненужный onlick внутри вашей showimage функции.Попробуйте удалить внутренний img.onclick возможно?

     <script type="text/javascript">

        function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                modal.style.display = "block";
                modalImg.src = img.src; // <- replace this with img
                captionText.innerHTML = img.alt;
        }
    </script>

Answer 2

Сначала необходимо связать метод "showimage", который будет вызываться при нажатии на изображение, а затем привязать

function ()
                {
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                }

при нажатии на изображение.Поэтому вам не следует снова связывать событие с тегом изображения.

удалить либо onclick = "showimage ()" из тега ur html, либо удалить img.onclick из кода JS.

записать еговроде:

function showimage(z)
        {
                var modal = document.getElementById('myModal'+z);
                var img = document.getElementById('myImg'+z);
                var modalImg = document.getElementById('img01'+z);
                var captionText = document.getElementById('caption'+z);

                 modal.style.display = "block";
                    modalImg.src = img.src;
                    captionText.innerHTML = this.alt;
        }

и будет отлично работать.