Javascript innerHTML not changing div contents

Question

I am trying to change the text displayed by a div from 'hello' to 'hey' on click using innerHTML. I know my function is executed and the innerHTML is changed because I get an alert on click displaying 'hey', but on my webpage and in inspector the 'text' element's contents remain as 'hello'.

What is going on here?

code:

<html>
  <head>
    <script type="text/javascript">
      function changehtml() {
        var text = document.getElementsByClassName('text');
        text.innerHTML = 'hey';
        alert(text.innerHTML)
      }
    </script>
  </head>
  <body>
     <div class='text' onclick='changehtml()'>
       hello
     </div>
    </body>
</html>

I was wondering if the OP could shed a little light on a question I have. I see virtually this same problem over and over on this site. Where did you find out about `getElementsByClassName`? The reason I ask is because the first sentence of the MDN docs on this function is "Returns an array-like object of all child elements which have all of the given class names". So either there is some reference out there that a lot of people are using that does not clearly state what that function returns ... or all these poster are too lazy to bother to read a few words before trying to use it. — gforce301, May 17 '18 at 19:38
@gforce301 I didn't think to read the documentation for this function bc I assumed that it was working properly since I wasn't getting errors and calling innerHTML returned correctly. I thought the issue, rather, was with how I was using innerHTML, and I didn't find anything that explained my issue. I probably came across examples that did what I did but using getElementsById, and wrongly assumed getElementsByClassName worked the same way(silly of me because classes aren't unique identifiers). I'm actually surprised I didn't get an error and that the alert displayed the proper HTML? Why? — notReallyDev, May 18 '18 at 19:00
@Michelle The reason that the alert displayed the HTML is because the [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) is an object just like everything else in javascript. This line: `text.innerHTML = 'hey';` created the previously undefined innerHTML property on that collection and set it's value, just like it would on any object. When that was passed to the alert function it showed it just fine. — gforce301, May 21 '18 at 14:44

score 0 · Answer 1 · answered May 17 '18 at 19:32

0

document.getElementsByClassName('text') gives you collection of nodes. So, you;ll have to loop through them to get each node. Or for this example you can use

 document.getElementsByClassName('text')[0];

Or

document.querySelector('.text')

This will give you the first node with class name of text.

And make it your habit to check your console for errors, you'll probably be getting one

answered May 17 '18 at 19:32

Muhammad Usman

10,039
22
39

I actually did not get any errors in Chrome inspector, do you have any idea why? – notReallyDev May 18 '18 at 19:02

score 0 · Accepted Answer · answered May 17 '18 at 19:33

Get elements by class returns an array of elements if you just want to change the one div give it and id and getElementById.

If you want to change multiple divs with that class the second snippet loops through the divs with that class and changes all of their texts.

function changehtml() {
  var text = document.getElementById('x');
  text.innerHTML = 'hey';
  alert(text.innerHTML)
}

<html>
<head>
</head>
<body>
  <div id="x" class='text' onclick='changehtml()'>
    hello
  </div>
</body>
</html>

function changehtml() {
  var text = document.getElementsByClassName('text');
  for (let i = 0; i < text.length; i++) {
    text[i].innerHTML = 'hey';
  }
}

<html>

<head>
</head>

<body>
  <div class='text' onclick='changehtml()'>
    hello
  </div>
</body>

</html>

Javascript innerHTML not changing div contents

2 Answers2