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

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

Adding a JavaScript variable into a Django template tag

Tips for transferring this text to a new line

Applying the CSS property overflow-x: hidden will prevent horizontal overflow and only display

What is the best way to populate a text field in AngularJS with multiple selected values?

What could be causing the server to return an empty response to an ajax HTTP POST request?

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Divide Chinese Characters

The size of the Tweet button iframe is set at 107 pixels

Vanishing essence

Problem with items overlapping in hoverable drop-down menu

Is the concept of client fanout truly beneficial?

Designing a personalized carousel component in Angular

Using Java beans to present form data utilizing session

Getting POST data in Next.js is a common task that requires understanding of how the

Real-time changes may not be instantly reflected in the model update

Unable to make an AJAX call to a Spring controller

Conceal a div element after initial visit

What is the best way to create a repeating Jquery loop in code?

Performing an Ajax request to load a partial view upon successful completion of another ajax request