How do I populate several elements on a page (that have the same class) with the same data?

Question

I understand how to display the current year and pass it through an ID, but the ID, of course, will only display once. I need to be able to display it multiple times throughout the site.

How do I accomplish this?

 //get year var yyyy = new Date().getFullYear(); currYear.innerHTML = yyyy; //trying to display as a class document.getElementsByClassName('thisYear')[0] = yyyy;

 <span id="currYear"></span> <span class="thisYear"><span>

Answer 1

From what i understand, you are trying to add the current year to multiple element in your HTML? Currently, you are only assigning it to the first one ( [0] ). You could parse each element with the class thisYear and add the current year to them.

 //get year var yyyy = new Date().getFullYear(); //trying to display as a class //the document.getElementByClassName returns a htmlCollection. not an array directly. //https://stackoverflow.com/a/3871602/5784924 Array.from(document.getElementsByClassName('thisYear')).forEach(function(element) { element.innerHTML = yyyy; });

 <div class="thisYear">this year</div><br> <div class="thisYear">this year</div><br> <div class="notThisYear"> not this year</div><br> <div class="notThisYear">not this year</div><br> <div class="thisYear"></div>

PS this answer reflect only what was asked by OP. If you wish see something more up to date and browser compliant, please see Scott Marcus' answer .

Answer 2

document.getElementsByClassName('thisYear')[0] = yyyy; attempts to set the DOM element returned from the call to the year, rather than some property of the DOM element to the year.

To make your code work, the "quick fix" is to add .innerHTML to your line:

document.getElementsByClassName('thisYear')[0].innerHTML = yyyy;

However, .getElementsByClassName() (along with similar APIs from the 1990s, like getElementsByTagName() , getElementsByName() and others) should no longer be used. I've written about this and the idea of adding an index to the end of a method that returns a node list here .

Instead, use the modern, standards-compliant .querySelector() and .querySelectorAll() and then you'll need to loop through the collection and modify the elements individually.

See the additional comments inline:

 //get year var yyyy = new Date().getFullYear(); //.querySelectorAll returns a node list, which is not an actual Array implementation. // IE doesn't support calling.forEach on node lists, so if you need to support IE // you'll need to convert the node list into an aray in order to call.forEach and you'll // need to do it in a way that IE understands (not Array.from()): // Array.prototype.slice.call(document.querySelectorAll('.thisYear')).forEach(function(element) { // But, if you are not concerned with IE, you can call.forEach() directly on the node list document.querySelectorAll('.thisYear').forEach(function(element) { // When the content you wish to update doesn't contain any HTML, don't use.innerHTML // which has performance and potential security implications, use.textContent instead element.textContent = yyyy; });

 div { margin-bottom:1em; }

 <div class="thisYear">this year</div> <div class="thisYear">this year</div> <div class="notThisYear"> not this year</div> <div class="notThisYear">not this year</div> <div class="thisYear"></div>

Answer 3

I guess you're trying to assign the current date to multiple elements witht the same class, if so. Please take a look at this example below.

var items = document.getElementById( 'items' ),
    divs = document.getElementsByClassName( 'count' );

[].slice.call( divs ).forEach(function ( div ) {
    div.innerHTML = items.innerHTML;
});

Source: Replace innerHTML of all divs with same class