need to collect image id attribute while onclick function is not working, unable to find fault

Advertisements

Please help,
I don’t understand what’s wrong. when I click on the images nothing happens. onclick="collectImageId(this.id) doesn’t seems to work. I checked everything up to my knowledge but couldn’t find what’s missing! can somebody help me to find the fault?

THE CODE IS TO COLLECT IMAGE IDs (my target project is to collect image ids from random 1000 images, this is just the mini version of the entire code)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collect Image IDs on Click</title>
    <script>
        // Global variable to store the last clicked image ID
        var lastClickedImageId = "";

        // Function to collect and store the image ID when clicked
        function collectImageId(imageId) {
            lastClickedImageId = imageId; // Save the clicked image ID
            console.log("Last clicked image ID:", lastClickedImageId);
        }
    </script>
</head>
<body>

<!-- Image 1 -->
<img id="image1" src="image1.jpg" alt="Image 1" onclick="collectImageId(this.id)">

<!-- Image 2 -->
<img id="image2" src="image2.jpg" alt="Image 2" onclick="collectImageId(this.id)">

<!-- Image 3 -->
<img id="image3" src="image3.jpg" alt="Image 3" onclick="collectImageId(this.id)">

<!-- Display last clicked image ID -->
<p>Last clicked image ID: <span id="lastClickedIdDisplay"></span></p>

<script>
    // Function to update the display of last clicked image ID
    function updateLastClickedIdDisplay() {
        document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
    }

    // Add event listeners to update the display when the global variable changes
    Object.defineProperty(window, 'lastClickedImageId', {
        set: function(value) {
            lastClickedImageId = value;
            updateLastClickedIdDisplay();
        },
        get: function() {
            return lastClickedImageId;
        }
    });
</script>

</body>
</html>`

I tried to find the fault. But unable find what is wrong, why the code is not working? why if the image is clicked nothing happens? — I expect the code to run smoothly and collect image id attribute whenever clicked.

>Solution :

You might want to simplify your code.

You can also display the id of the clicked image on the same function where you collected it.

You can transfer the document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId; to your collectImageId function after you get the lastClickedImageId.

Your JS should be like this:

var lastClickedImageId = "";

function collectImageId(imageId) {
    lastClickedImageId = imageId; // Save the clicked image ID
    document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
}

Note that I also removed the other scripts at the bottom script tag and transferred your collectImageId function there because JS is mostly placed there not in the head tag (that’s CSS).

Here is the working code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collect Image IDs on Click</title>
</head>
<body>

<!-- Image 1 -->
<img id="image1" src="image1.jpg" alt="Image 1" onclick="collectImageId(this.id)">

<!-- Image 2 -->
<img id="image2" src="image2.jpg" alt="Image 2" onclick="collectImageId(this.id)">

<!-- Image 3 -->
<img id="image3" src="image3.jpg" alt="Image 3" onclick="collectImageId(this.id)">

<!-- Display last clicked image ID -->
<p>Last clicked image ID: <span id="lastClickedIdDisplay"></span></p>

<script>
    // Global variable to store the last clicked image ID
    var lastClickedImageId = "";

    // Function to collect and store the image ID when clicked
    function collectImageId(imageId) {
        lastClickedImageId = imageId; // Save the clicked image ID
        console.log("Last clicked image ID:", lastClickedImageId);
        document.getElementById('lastClickedIdDisplay').textContent = lastClickedImageId;
    }
</script>

</body>
</html>

Leave a ReplyCancel reply