The onclick function only triggers after the second click

Question

The onclick function only triggers after the second click

I have an issue with my image view onclick function code. Currently, the code works perfectly but only when I click for the second time. I am not sure what the problem is and would appreciate any help in fixing it. Below is the code snippet:

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

javascript jquery html css ajax

Answer 1

Answer №1

Initially, you are assigning the "showimage" function to trigger when the image is clicked, followed by another assignment

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

upon clicking the image. There is no need to continuously assign the event to the image tag.

You can either remove onclick="showimage()" from your HTML tag or eliminate img.onclick from the JavaScript code.

Simply restructure it as follows:

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

This adjustment will ensure smooth functionality.

Answer 2

Initially, you are assigning the "showimage" function to trigger when the image is clicked, followed by another assignment

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

upon clicking the image. There is no need to continuously assign the event to the image tag.

You can either remove onclick="showimage()" from your HTML tag or eliminate img.onclick from the JavaScript code.

Simply restructure it as follows:

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

This adjustment will ensure smooth functionality.

Answer 3

Answer №2

Your code snippet is a bit unclear as it only provides a small portion of the entire code. One thing to note is that there seems to be an unnecessary onlick function inside the showimage function. To improve clarity, consider removing the inner img.onclick part.

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

Your code snippet is a bit unclear as it only provides a small portion of the entire code. One thing to note is that there seems to be an unnecessary onlick function inside the showimage function. To improve clarity, consider removing the inner img.onclick part.

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

The onclick function only triggers after the second click

Answer №1

Answer №2

Similar questions

Is it possible for a Simplemodal popup to appear only once per user session

What is the best way to execute an ajax call in a Ruby on Rails application?

Determined margin value to replicate the maximum and minimum margin in CSS styling

Customizing a unique dropdown navigation experience

Adding a Table Row in jQuery without Appending it to the Bottom of the Table

Implementing additional states in an AngularJS app configuration with Ui-Router

Using PHP/MySQL to enable users to make changes to their account details

Disappearance of array data

Ways to showcase a website within an HTML document using a URL?

What is the correct way to place an item within a grid layout?

Performing an ajax request in asp.net mvc 4 to a download controller

Issues with Bootstrap split button display malfunctioning

There was an error that said: "Uncaught TypeError: Function.prototype.apply: Arguments list has wrong type

Leveraging server.ts for Development with Angular 5 Universal

Having trouble with Autocomplete Search feature in Laravel?

<div> issues with background display

Issue with ERR_HTTP_HEADERS_SENT persists despite implementation of return statements

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

A step-by-step guide on splitting an element into two separate elements using jquery

React does not always remove event listeners when using the useEffect hook's return callback