Uncaught TypeError: eToggle.appendChild is not a function

Question

Hi, I am having an issue with dynamically adding buttons to my document using javascript. (I know jQuery is alot easier but I also want to learn to do it with js so bear with me :p).

Basically I think my code works up untill my last line then I get the follwing error : Uncaught TypeError: eToggle.appendChild is not a function...

This is the jfiddle link: https://jsfiddle.net/6620Lcfv/17/

and this is all the code for those donn't want to fiddle :p

function seperate(){

        var eContainer = document.createElement('div'); //Create element div and safe in variable eContainer
        var eKnop = document.createElement('button'); //Create element button and safe in variable eKnop

            eKnop.appendChild(document.createTextNode("Verberg afbeelding")); //Set innerHTML for eKnop
            eContainer.appendChild(eKnop); //append eKnop in eContainer

        var eToggle = document.getElementsByClassName("toggle"); //append eContainer in eToggle
            eToggle.appendChild(eContainer); //append eContainer in eToggle


}

  <div class="toggle"><img class="screenshot" width="238" height="222" src="../images/clip_image014.gif" alt="schermafdruk"> </div>

Basically what I want to do is create a new button and add this into a new created div and then append this created div together with the button in an already existing div with class of toggle.... When I try to append to the body instead of this already existing div it works fine but that's not the outcome I want any idea what is the solution to this error?

EDIT: var eToggle = document.getElementsByClassName("toggle")[0]; //append eContainer in eToggle

Needed to add the [0] at the end of my line!

Answer 1 · 2017-04-20T16:16:59Z

April 20, 2017 4:16pm

Hi. I saw that you found the problem :D

Here is how I would do it:

function seperate() {
  var eToggle = document.getElementById('toggleID'); //append eContainer in eToggle

  var eContainer = document.createElement('div'); //Create element div and safe in variable eContainer
  var eKnop = document.createElement('button'); //Create element button and safe in variable eKnop
      eKnop.innerHTML = "Verberg afbeelding";  //you can access DOM Objects keys with dot notation no need for calling a function 

  eContainer.appendChild(eKnop); //append eKnop in eContainer

  eToggle.appendChild(eContainer);

}

seperate();

IMO it's better to work with id="" than class when appending dynamic DOM - because you can never be sure that the element you are looking for is on the index position [0].

Just a thought ;)

Best, Nejc

Welcome to the Treehouse Community

Looking to learn something new?

Pieter Bracke

Pieter Bracke

Uncaught TypeError: eToggle.appendChild is not a function

1 Answer

Nejc Vukovic

Nejc Vukovic