onclick function it's working only after second click

Question

I have (onclick) function code for image view that code is working perfectly the issue is it is working when i click second time only. I can't understand what is the issue is please help me to fix this issue. I attached the code below..

<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

First ur binding the "showimage" method to be called when u click on the image then ur binding

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

on click of the image. So u should not bind the event again on the image tag.

remove either onclick="showimage()" from ur html tag or remove img.onclick from the JS code.

write it like :

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

and it will work perfectly.

Answer 2

It is not clear what your code is doing, 'cause you provide only small piece of it. But you definitely have a completely unnecessary onlick inside your showimage function. Try to remove the inner img.onclick perhaps?

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