The function document.getElementById is unable to select multiple elements simultaneously

Question

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function.

function loading() {
     setTimeout(function() {
         document.getElementById("loading").style.display = "none";
         document.getElementById("message").style.display = "block";
     }, 500, "fadeOut");
 }

However, the line

document.getElementById("message").style.display = "block";

only targets the first #message div.

function loading() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    document.getElementById("message").style.display = "block";
  }, 500, "fadeOut");
}
loading();

#loading {
  display: block;
}
#message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
  <div id="loading">
    ...
  </div>
  <div id="message">
    QWERTY
  </div>
  <div id="message">
    123456
  </div>
</div>

javascript jquery html css

Answer 1

Answer №1

It has been pointed out by others that ids should be unique and used only once on a page, hence using classes instead is recommended. In this solution, I have utilized querySelectorAll to select a static list of classes.

Another issue lies in the fact that you appear to be attempting to fade elements using jQuery without actually utilizing jQuery for anything else. I would suggest employing CSS transitions instead. They are simple to implement and eliminate the need for loading a large library. The approach here involves adding new classes, fadein and fadeout, which adjust the opacity of specified elements to zero over a period of three seconds.

function loading() {
  setTimeout(function() {

    // ensure a loader class is used as well, to enable proper transition
    const loader = document.querySelector('.loading');
    loader.classList.add('fadeout');

    // select elements with the message class
    const messages = document.querySelectorAll('.message');

    // iterate over each element and add a fadein class
    [...messages].forEach(message => message.classList.add('fadein'));
  }, 500);
}

loading();

.loading {
  opacity: 1;
}

.message {
  opacity: 0;
}

.fadein {
  transition: opacity 3s ease-in-out;
  opacity: 1;
}

.fadeout {
  transition: opacity 3s ease-in-out;
  opacity: 0;
}

<div class="messages">
  <div class="loading">
    Loading
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 2

It has been pointed out by others that ids should be unique and used only once on a page, hence using classes instead is recommended. In this solution, I have utilized querySelectorAll to select a static list of classes.

Another issue lies in the fact that you appear to be attempting to fade elements using jQuery without actually utilizing jQuery for anything else. I would suggest employing CSS transitions instead. They are simple to implement and eliminate the need for loading a large library. The approach here involves adding new classes, fadein and fadeout, which adjust the opacity of specified elements to zero over a period of three seconds.

function loading() {
  setTimeout(function() {

    // ensure a loader class is used as well, to enable proper transition
    const loader = document.querySelector('.loading');
    loader.classList.add('fadeout');

    // select elements with the message class
    const messages = document.querySelectorAll('.message');

    // iterate over each element and add a fadein class
    [...messages].forEach(message => message.classList.add('fadein'));
  }, 500);
}

loading();

.loading {
  opacity: 1;
}

.message {
  opacity: 0;
}

.fadein {
  transition: opacity 3s ease-in-out;
  opacity: 1;
}

.fadeout {
  transition: opacity 3s ease-in-out;
  opacity: 0;
}

<div class="messages">
  <div class="loading">
    Loading
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 3

Answer №2

It is important to assign unique IDs to your DOM elements. Consider updating your code as follows:

<script type="text/javascript">
function displayMessages() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    var elements = document.getElementsByClassName('message');
    console.log(elements);
    $.each(elements, function(index, item){
    item.style.display = 'block';
    });
  }, 500, "fadeOut");
}
displayMessages();
</script>
<style>
#loading {
  display: block;
}
.message{
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="displayMessages();">
  <div id="loading">
    ...
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 4

It is important to assign unique IDs to your DOM elements. Consider updating your code as follows:

<script type="text/javascript">
function displayMessages() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    var elements = document.getElementsByClassName('message');
    console.log(elements);
    $.each(elements, function(index, item){
    item.style.display = 'block';
    });
  }, 500, "fadeOut");
}
displayMessages();
</script>
<style>
#loading {
  display: block;
}
.message{
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="displayMessages();">
  <div id="loading">
    ...
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 5

Answer №3

ID attribute should always be unique. Repeating the same ID multiple times on a page is not allowed. In case you need to use the same identifier, consider using it as a class or data-id, which can either be identical or different.

Answer 6

ID attribute should always be unique. Repeating the same ID multiple times on a page is not allowed. In case you need to use the same identifier, consider using it as a class or data-id, which can either be identical or different.

Answer 7

Answer №4

To select multiple elements with the same identifier in a document, it is important to use different classes instead of repeating the same id. You can group them by class and then utilize the following methods to select them all:

document.querySelectorAll(".ClassName")

Or

document.getElementsByClassName(".ClassName");

Keep in mind that both approaches will return a collection of all elements in the document that share the specified class name, presented as a NodeList object.

Answer 8

To select multiple elements with the same identifier in a document, it is important to use different classes instead of repeating the same id. You can group them by class and then utilize the following methods to select them all:

document.querySelectorAll(".ClassName")

Or

document.getElementsByClassName(".ClassName");

Keep in mind that both approaches will return a collection of all elements in the document that share the specified class name, presented as a NodeList object.

Answer 9

Answer №5

function displayMessage() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    document.getElementById("message").style.display = "block";
  }, 500, "fadeOut");
}
displayMessage();

#loading {
  display: block;
}
#message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="displayMessage();">
  <div id="loading">
    ...
  </div>
  <div id="message">
    QWERTY
  </div>
  <div id="message">
    123456
  </div>
</div>

Answer 10

function displayMessage() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    document.getElementById("message").style.display = "block";
  }, 500, "fadeOut");
}
displayMessage();

#loading {
  display: block;
}
#message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="displayMessage();">
  <div id="loading">
    ...
  </div>
  <div id="message">
    QWERTY
  </div>
  <div id="message">
    123456
  </div>
</div>

The function document.getElementById is unable to select multiple elements simultaneously

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can I iterate through a JavaScript object in a recursive manner?

Using Vue.js to send a slot to a child component in a nested structure

Transform an object containing key-value pairs into an array of objects that include the key name and its corresponding value

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

Implementing clickable table rows in React Router Link for seamless navigation

The d3 hierarchy possesses the capability to compute the average values of child nodes

The scrolling speed of the mousewheel in Firefox is notably slower compared to that of Google Chrome

Utilize Jquery to calculate the product of the number inputted into the field

Reverse the order of jQuery toggle animations

How can audio be efficiently streamed to the browser in small chunks using JavaScript?

jQuery AJAX delivering HTML output upon completion

Verify whether the input field contains a value in order to change certain classes

Switch images when hovering

Angular 11 along with RxJS does not support the combineLatest method in the specified type

Hover background color not being applied to child elements within Button element in Firefox

Is it possible to apply a CSS transform without erasing the existing transform?

Having trouble passing data from router to View with EJS in Express. Despite trying, still encountering ReferenceError message

When incorporating <Suspense> in Next.js, the button's interaction was unexpectedly lost

Terminate a targeted recipient following the completion of the on event

Guide on displaying an array object in MongoDB using React