0

I was making an editable div, and it was working fine in codeSandbox but when I moved it to the vanilla js section of codeSandbox I got this error.

I looked up here for answers and applied all but I am not able to counter this problem.

root1.appendChild is not an function;

This is the js code,

let root1 = document.getElementsByClassName("root2");
let div1 = document.createElement("div");
if(localStorage.getItem("notes")===null){
  localStorage.setItem("notes" , "Hi there!")
}
show();
root1.appendChild(div1);
div1.setAttribute("class", "info");
div1.setAttribute("style", "border : 2px solid black ; padding:9px");
div1.addEventListener("click", function (e) {
  let inputElem = document.getElementsByClassName("inputElem");
  if (inputElem.length === 0) {
    div1.innerHTML = `<input id='text' style='padding:4px' class='inputElem' placeholder='edit text' />`;
  }
  let text = document.getElementById("text");
  text.addEventListener("blur", function () {
    localStorage.setItem("notes", text.value);
    div1.innerHTML = localStorage.getItem("notes");
  });
});
function show(e) {
  div1.innerHTML = localStorage.getItem("notes");
}

This is the HTML code,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>My Website</title>
        <!-- <script src="./src/index.js" defer ></script> -->
    </head>
  <body>
        <div id="root1" class="root2" style="display : flex  ; align-items :center  ; flex-direction : column" >
                one
            </div>
        <script src="./src/index.js" ></script>
            <!-- added defer also -->
        </body>
        </html>

For reference, you can see this codesandbox link

https://codesandbox.io/s/interesting-thunder-c4f9cs?file=/index.html

Ankit
  • 1,359
  • 1
  • 2
  • 15
  • That’s not an error that this code can produce; you’re never calling `root1.appendChild(div1)` _itself_. _`root1.appendChild`_ isn’t a function, because there is no such thing as `HTMLCollection.prototype.appendChild`. – Sebastian Simon Oct 26 '22 at 05:28
  • Can you elaborate, I am not getting you. I am getting a `TypeError` – Ankit Oct 26 '22 at 05:31
  • I just need to use `getElementById` in root1 and everything is fine. Why you said I never called `root1.appendChild(div1)` ? – Ankit Oct 26 '22 at 05:40
  • The error message is _“`TypeError`: `root1.appendChild` is not a function”_ or a variation thereof. It can’t be _“`TypeError`: `root1.appendChild(div1)` is not a function”_. The parentheses and arguments are an important clue when debugging code, so please copy the _exact_ error message. Calling `root1.appendChild(div1)` _itself_ would look like this: `root1.appendChild(div1)();`, which would only produce that error if `root1.appendChild` _was_ a function _and_ `root1.appendChild(div1)` _wasn’t_. See [What is the difference between a function call and function reference?](/q/15886272/4642212). – Sebastian Simon Oct 26 '22 at 05:49

0 Answers0