CODEWITHSUNDEEP
javascript
user5589998
user5589998

Reputation:

getElementByClassName returning 'undefined', but it works for Id?

I'm trying to change the contents of an Id with a class, and I don't know why this isn't working...

<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>

<span class="content">Please work!</span>

This is returning 'undefined', and my text editor doesn't seem to recognise getElementsByClassName - it works fine with getElementById

 var test = document.getElementsByClassName("content").innerHTML;

 document.getElementById("header").innerHTML = test;

DEMO

Upvotes: 1

Views: 2470

Answers (5)

CoderPi
CoderPi

Reputation: 13221

The key to your Problem is the little "s" hidden in the expression: "getElementsByClassName". document.getElementsByClassName will return an array, in order to get the first element use document.getElementsByClassName("content")[0] or use a for loop to loop through all elements

var test = document.getElementsByClassName("content")[0].innerHTML;

document.getElementById("header").innerHTML = test;

var elements = document.getElementsByClassName("content")
for (var i = 0; i < elements.length; ++i) {
  // elements[i]
}
<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>

<span class="content">Please work!</span>

Upvotes: 1

hling
hling

Reputation: 19

Access it like this :-

document.getElementsByClassName("content")[0];

getElementsByClassName() method gets many DOM elements unlike getElementById() which gets only one.

Upvotes: 1

www139
www139

Reputation: 5237

This should fix your problem. Let me know if there is anything I can do :)

document.getElementById returns only one element. document.getElementsByClassName and document.getElementsByTagName can return multiple elements because there can be multiple a elements on a page and multiple class names used on a page but there can only be one id per page. That being said, you must tell JavaScript which element you are wanting since there can be multiple elements with the class name of content. To do this, you use document.getElementsByClassName('content')[index]. Many people like to use loops here to quickly loop through all the elements with a specific class or tag name.

Hope you learned something, I learn something here every day too :)

window.addEventListener('load', function() {
  var test = document.getElementsByClassName("content")[0].innerHTML;
  document.getElementById("header").innerHTML = test;
});
<h1 id="header">Default header HTML</h1>
<h4 id="sub">sub header</h4>

<span class="content">Content HTML</span>

Upvotes: 0

icasdri
icasdri

Reputation: 106

getElementsByClassName returns an array of elements (whereas getElementById returns a single element -- notice plural vs. singular). Since a javascript array does not have the innerHTML attribute, you are getting the undefined. You must retrieve an element out of the array first. e.g.

var elements = document.getElementsByClassName("content");
var firstElement = elements[0];
var x = firstElement.innerHTML // and so on...

Upvotes: 0

Merott
Merott

Reputation: 7379

var test = document.getElementsByClassName("content")[0].innerHTML;
document.getElementById("header").innerHTML = test;
<h1 id="header">header</h1>
<h4 id="sub">sub header</h4>


<span class="content">It's working!</span>

Upvotes: 0

Related Questions