CODEWITHSUNDEEP
javascripthtmlcounter
slowdmelendez360
slowdmelendez360

Reputation: 83

Problem with GetElementsByClass & GetElementByID

I am working on a countdown.

I need to have multiple instances of the same item in my html. This is my code:

function test() {
//                                   (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,28,11,00,0));

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementsByClassName("test").innerHTML = days + "<span>d</span> " + hours + "<span>h</span> "
    + minutes + "<span>m</span> " + seconds + "<span>s</span><br />";
    
    
    // If the count down is over, write some text 
    if (distance < 0) {
        document.getElementsByClassName("test").innerHTML = "Live <i class='fa fa-circle faa-flash animated'></i>";
    }    
}, 1000);

}

The problem is that when i use: document.getElementsByClassName("test") there is nothing in my html, but if i use: document.getElementByID("test") then it does work. But I don't need to use id, because I need that element to be several times in the same html

Upvotes: 2

Views: 93

Answers (6)

Ben Baldwin
Ben Baldwin

Reputation: 497

document.getElementsByClassName

Returns an HTML collection, which is like an array of items. You need to set the innerHTML of each element in the array. Try:

document.getElementsByClassName('test').forEach(element => element.innerHTML = "Your Code Here")

Upvotes: 1

Jestin Wilson
Jestin Wilson

Reputation: 191

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.

The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0

You can find out all the nodes with class name test by using Array.from(document.getElementsByClassName("test")) . Please find the code below.

var domElements= Array.from(document.getElementsByClassName("test"));
/*For particular element*/
domElements[index].innerHTML="Your Content";
/*For all elements*/
domElements.map(element=>
{
    element.innerHTML="Your Content";
});

Upvotes: 1

huan feng
huan feng

Reputation: 8623

When I saw this question, it mentioned using getElementsByClassName will not get anything, the thing I can thought of if the class is added.

Really don't know why giving an votedown, it's really a basic question.

Here is the working fiddle: https://jsfiddle.net/t3Lc9ns6/

document.getElementsByClassName should work, it will return an HTMLCollection. Please check you HTML element if it contains the 'test' class.

document.getElementsByClassName('test')

Upvotes: -1

dileep
dileep

Reputation: 1

getElementsByClassName returns a collection of html elements having a specific class name as array . In your case it returns a collection of objects with class name test.

You should use above method as: var element=document.getElementsByClassName("test"); element[0].innerHTML="Your content";

It will work!

Upvotes: 0

Cray
Cray

Reputation: 2850

document.getElementsByClassName returns a HTMLCollection not a specific element, so you can't use innerHTML on it without getting the element first. Use iteration to loop through all items in the collection.

Also since HTMLCollection doesn't support simple forEach you may want to use querySelectorAll instead.

document.querySelectorAll('.test').forEach((element) => {element.innerHTML = "test"})

Upvotes: 1

Kritish Bhattarai
Kritish Bhattarai

Reputation: 1661

if you want to use className, then you need to use iteration

let items= document.getElementsByClassName("test");

for(let i = 0; i < items.length; i++) {
   items[i].innerHTML = `your innerHTML here`;
}

Upvotes: 1

Related Questions