CODEWITHSUNDEEP
javascriptfirefoxinnerhtml
baejusik
baejusik

Reputation: 71

innerHTML isn't working with getElementsByClassName

I'm just a beginner. And I'm trying to use innerHTML. I think I wrote proper code, but it doesn't work. When I click the trigger, the page becomes white and showing the statut : 'connecting' I don't know where is the problem

Please someone help me.

Here are my codes.

HTML CODE

<div class = "head">
<nav>
<a onClick="open()">

<div class = "body">
<div class = "bodyL">
<div class = "newsPnT">

JAVASCRIPT CODE

function open() {
   document.getElementsByClassName('newsPnT').innerHTML = "asdfasdfasdf";
}

What is the problem with my code?

PS: I'm using Firefox Aurora. When I click the trigger, the 'debugger > sources' says, 'waiting for sources.'

Upvotes: 1

Views: 2525

Answers (2)

baejusik
baejusik

Reputation: 71

the className 'open' seemed to the keyword of javascript. I changed the className from 'open' to 'openThis'and that came to be a solution of the problem.

Upvotes: 0

Eugene Obrezkov
Eugene Obrezkov

Reputation: 2986

getElementsByClassName() returns array with elements.

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

So you need iterate array and set innerHTML like this i.e.

var elements = document.getElementsByClassName('myClass');
Array.prototype.forEach.call(elements, function(element) {
    element.innerHTML = 'Your text goes here';
});

Also a little bonus JSFiddle

Upvotes: 3

Related Questions