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>