Querying html for an id in JS

Question

I am in the process of completing CS50 and a took the WEB Tracks. I am currently searching for a solution with a JS problem.

function blink() {
  let body = document.querySelector('body');
  if (body.style.visibility === 'hidden') {
    body.style.visibility = 'visible';
  } else {
    body.style.visibility = 'hidden';
  }
}

// Blink every 500ms
window.setInterval(blink, 500);

This is a working solution, however I need to alter it so that it selects all specific ids. For example id="image". I found an adaptation that only select 1 picture and makes it blink. How do i make all three blink?

There is an obvious solution with writing more code, but i hope there is another way

`document.querySelector('body');` this is your starting point. And [this question](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) should help you edit it. — evolutionxbox, Oct 21 '20 at 20:45
Do read: [StackSnippets](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) — Randy Casburn, Oct 21 '20 at 20:48

Olaf Erlandsen · Accepted Answer · 2020-10-21T21:00:20.467

you will try with:

document.querySelector('#image') // return first item
document.querySelectorAll('#image') // return array items

document.getElementById('image') // similar to querySelector('#image')

maybe you can try with selector [id='image'] if for some reason #id not working properly.

example:

setTimeout(() => {
  document.querySelector('#image').style.visibility = 'visible'
}, 2000);

let interval;
interval = setInterval(() => {
  const image = document.querySelector('#image');
  if (image && image.style.visibility !== 'hidden') {
      clearInterval(interval);
      alert("is visible");
  }
}, 500);

<img style="visibility: hidden;" src="https://www.gravatar.com/avatar/dab6fe88b302678ad222467965a0423e?s=48&d=identicon&r=PG" id="image" />

css selectors(examples):

#someId - search by id
a - find a tag
[attribute='value'] - find by attribute value
.className - find by class
:not(.className) - find where not

Querying html for an id in JS

1 Answers1