All images made visible with the same id after 5 seconds with javascript

Question

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>

There can't be multiple elements with the same ID in valid HTML, so this won't work, by design. — DBS, Feb 02 '22 at 11:42
Never pass a string to `setTimeout`. use `setTimeout(change, 5000);` instead. — T.J. Crowder, Feb 02 '22 at 11:43

score 1 · Answer 1 · answered Feb 02 '22 at 11:46

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:

Using CSS for a fade-in effect on page load

score 1 · Answer 2 · answered Feb 02 '22 at 11:53

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>

score 0 · Answer 3 · edited Feb 02 '22 at 12:03

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>

score 0 · Answer 4 · answered Feb 02 '22 at 15:09

I found this script very useful on a per class basis. I have another question about this script! could you add the fade effect to the appearance of the images by embedding this code?

function change () {
  var images = document.querySelectorAll(".image img");
    images.forEach(image=>image.style.visibility = "visible");
}
setTimeout (change, 5000);

All images made visible with the same id after 5 seconds with javascript

4 Answers4