why can't i type in div and i can't see code snippets when i type getElementById

Question

why can't i change innerHTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <style>
    </style>
</head>

<body>
  <div class="sa"></div>



    <script>
        var a = document.getElementsByClassName("sa").innerHTML;
         a = "hi";
        console.log(a);
       
    </script>
</body>

</html>

output : output

i can't even see the code snippets: code snippets-1, code snippets-2

where is wrong in this code?,I searched but couldn't find the result I wanted, I'm not even sure I'm asking the right question, it happens every time I see an example but not when I do,i scare of stop myself in the start.

I'm trying to write hi to the div and check the hi in the console as a result I can't see what I'm typing on the page but I see it in the console

The `getElementsByClassName()` method returns a **list** of elements. — Pointy, Nov 18 '22 at 13:33
After you fix the getElementsByClassName issue, you can not write innerHTML to a variable and expect it to update the DOM. — epascarello, Nov 18 '22 at 13:36

score 0 · Answer 1 · answered Nov 18 '22 at 13:33

0

document.getElementsByClassName() returns an array of items that match the class you passed in as an argument.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

answered Nov 18 '22 at 13:33

Nuro007

157
12

dangarfield · Accepted Answer · 2022-11-18T13:39:55.500

In your example, you get the innerHTML DATA, it is not a reference to the element's HTML. The a variable is now a string of text. Therefore, when you try and change it, you change the value of a and NOT the innerHTML of the element.

Instead, get the element reference as below. Then set the innerHTML on that element.

Also, as you getting multiple elementS (plural), you will either need to loop after all, or get the first one. Often it's easier to just use document.querySelector('.sa') when working with css selectors.

var a = document.getElementsByClassName("sa").innerHTML; // a is a string 
a = "new";
console.log(a);

// You want
var aElement = document.getElementsByClassName("sa")[0]
aElement.innerHTML = "new";

<div class="sa">old</div>

Agreed, I preemptively clicked publish – dangarfield Nov 18 '22 at 13:41 — dangarfield, Nov 18 '22 at 13:41

score 0 · Answer 3 · answered Nov 18 '22 at 13:37

0

document.getElementsByClassName() returns a collection of elements. If you want to access the innerHTML property if these elements you will have to use a .forEach() loop like in:

document.getElementsByClassName().forEach(e=>e.innerHTML="new stuff");

answered Nov 18 '22 at 13:37

Carsten Massmann

26,510
2
22
43

why can't i type in div and i can't see code snippets when i type getElementById

3 Answers3