-2

I know maybe is not the right way of using the getElementsByClassName. For example the code below doesn't work as it is ¿why?, but when change getElementsByClassName("demo") for getElementById("demo2") does work

<!DOCTYPE html>
<html>
<body>

<p>Click the button.</p>
<button onclick="myFunction()">Try it</button>
<p class="demo" id="demo2">anything</p>

<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.split(" ");
document.getElementsByNameClass("demo").innerHTML = res;
}
</script>

</body>
</html>
user2495207
  • 861
  • 2
  • 10
  • 15
  • 3
    Because `getElementsByNameClass` (it actually should be `getElementsByClassName`) returns a collection and `getElementById` returns one element. The collection doesn't have `innerHTML` property and setting it has no effect. – Ram May 07 '16 at 17:09
  • 3
    I'm surprised `getElementsByNameClass` does anything. – kindall May 07 '16 at 17:09
  • The OP had it spelled correctly in 75% of the attempts in the question. The one misspelled occurrence is certainly a typo. –  May 07 '16 at 17:13
  • @Vohuman: Please write your answers in the _answer section_. You can find it down below. – Lightness Races in Orbit May 07 '16 at 17:16
  • @LightnessRacesinOrbit Sarcasm? Many questions on SO are either duplicates or super-simple problems. This is why I usually don't post answers. But you are right, comments can overshadow answers. I'll consider this. – Ram May 07 '16 at 19:20
  • @Vohuman: Why would it be sarcasm? Answers do not belong in the comments section, ever. They cannot be downvoted, they do not enter review queues, and they cannot be edited. The comments section is for _comments_. The answer section is for your answers. And if you encounter a duplicate or a super-simple problem, you should not be encouraging it by answering it anyway. Stack Overflow was founded on the express principle of providing quality, peer-reviewed Q&A; it is _not_ a message board or chatroom! (Although we do have some of those if you want to do personal help outside of the Q&A model). – Lightness Races in Orbit May 07 '16 at 19:22
  • (I realise the irony of saying you shouldn't answer dupes. I didn't know this was a dupe when I answered it :P The difference is that you seem to be doing so deliberately.) – Lightness Races in Orbit May 07 '16 at 19:23

2 Answers2

0

getElementsByClassName returns a collection (an HTMLCollection, which is "an array-like object"), because there may be multiple elements with that class name. A collection has no innerHTML property. You would have to iterate over each element in the collection using a loop:

var elements = document.getElementsByClassName("demo");
for (var i = 0; i < elements.length; i++) {
   elements[i].innerHTML = res;
}

By contrast, getElementById returns a single element, and it can do so because an IDs are unique.

(I'm assuming that getElementsByNameClass in your example is a typo.)

Community
  • 1
  • 1
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
0

getElementById() is used to access the DOM elements using their id and getElementsByClassName() is used to access element(s) using their class.

Your code does not work because getElementsByClassName() returns an array-like object of all elements with given class. You need to access the first element of the array for your scenario

    <html>
    <body>

    <p>Click the button.</p>
    <button onclick="myFunction()">Try it</button>
    <p class="demo" id="demo2">anything</p>

    <script>
    function myFunction() {
      var str = "How are you doing today?";
      var res = str.split(" ");
      document.getElementsByClassName("demo")[0].innerHTML = res;
    }
    </script>

    </body>
    </html>
Aditya Singh
  • 15,810
  • 15
  • 45
  • 67