I have a grid of product images and I would like all images with the same ID to be made visible after 5 seconds with javascript. At the moment it only works with the first image while the others remain hidden and all have the same id. I wish it would work for all images with the same ID.
/html example/
<div class"product1 image">
<img src="image1.jpg" id="myid">
</div>
<div class"product2 image">
<img src="image2.jpg" id="myid">
</div>
/css example/
.image {
visibility: hidden;
}
/js example/
<script type="text/javascript">
function change () {
var image = document.getElementById ("myid");
image.style.visibility = "visible";
}
setTimeout ("change ();", 5000);
</script>
You should only ever have one element with a particular ID in your page. getElementById returns a single element, so it is likely just finding the first item in the screen.
You could give them either a css class with the same name, or use a data-* attribute to identify them e.g.
<img src="image2.jpg" data-image-group="bob" />
And this would then return all the elements matching that group name:
let matchedImages = document.querySelectorAll("[data-image-group='bob']")
matchedImages .forEach(function(image) {
image.style.visibility = "visible";
});
Alternatively (and this might be the best approach), consider a pure CSS approach to dealing with this display problem and use an animation to have them hidden initially and then fade in. A sample of this can be found on this answer:
A few issues with your code. First you're missing = when setting class of div. Then ids should be unique. Probably the easiest solution after fixing the minor problems is to use querySelectorAll and query img that are children of .image class which is already set.
function change () {
var images = document.querySelectorAll(".image img");
images.forEach(image=>image.style.visibility = "visible");
}
setTimeout (change, 5000);.image {
visibility: hidden;
}
img{
width: 50px;
}<div class="product1 image">
<img src="https://logos-download.com/wp-content/uploads/2019/01/JavaScript_Logo.png">
</div>
<div class="product2 image">
<img src="https://blog.jeremylikness.com/blog/2019-03-05_typescript-for-javascript-developers-by-refactoring-part-1-of-2/images/1.jpeg">
</div>id identifier must be unique and applied on single element. You can't specify same id value for more than 1 elements. You can but it wouldn't work and is a poor HTML practice. You should use classes for such cases. You can give image class name for all your elements and then select them by class name using JavaScript:
<div class="product1 image">
<img src="image1.jpg" class="image">
</div>
<div class="product2 image">
<img src="image2.jpg" class="image">
</div>
<script type="text/javascript">
function change () {
var images = document.getElementsByClassName("myid");
images.forEach(element => element.style.visibility = "visible");
}
setTimeout ("change ();", 5000);
</script>