title: Getting error "Cannot read property 'appendchild' of undefined
body: <p>I am making this website for sharing your own recipe. I am making input fields above and this is the javascript. It returns the error: </p>
  
  <blockquote>
    <p>Getting error "Cannot read property 'appendchild' of undefined.</p>
  </blockquote>
  
  <p>It says so about the line <code>newTable.appendChild(createRow);</code> I cannot seem to figure out what is wrong? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;link rel="stylesheet" type="text/css" href="bootstrap.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="Baksnakk.css"&gt;
          &lt;title&gt;Baksnakk.no - Hovedside&lt;/title&gt;
      &lt;style&gt;&lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container-fluid"&gt;
  
              &lt;div class="page-header"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-4"&gt;&lt;/div&gt;
                      &lt;div class="col-lg-4"&gt;&lt;h1&gt;Baksnakk.no &lt;small&gt;Slagord.jpg&lt;/small&gt;&lt;/h1&gt;&lt;/div&gt;
                      &lt;div class="col-lg-4"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;nav class="navbar navbar-default"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-4"&gt;
                              &lt;ul class="nav navbar-nav"&gt;
                                  &lt;li&gt;&lt;a href="Baksnakk.html"&gt;Hjem&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Baksnakk - Kanelsnurrer.html"&gt;Kanelsnurrer&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Baksnakk - Custom.html"&gt;Lag din egen oppskrift!&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-5"&gt;&lt;/div&gt;
                          &lt;div class="col-sm-3"&gt;
                              &lt;form class="navbar-form navbar-left" role="search"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;input type="text" class="form-control" placeholder="Search"&gt;
                                  &lt;/div&gt;
                                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  
              &lt;div class="jumbotron"&gt;
                  &lt;div class="row"&gt;
  
                      &lt;div class="col-lg-6"&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input type="text" class="form-control" placeholder="Navn på oppskrift..." aria-describedby="basic-addon2"&gt;
                                  &lt;span class="input-group-addon" id="basic-addon2"&gt;og&lt;/span&gt;
                                  &lt;input type="number" class="form-control" placeholder="Antall personer..."&gt;
                                  &lt;span class="input-group-btn"&gt;
                                      &lt;button class="btn btn-default" type="button"&gt;Legg til!&lt;/button&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
  
                     &lt;div class="col-lg-6"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;input type="text" class="form-control" placeholder="Ingrediens..." aria-describedby="basic-addon2"&gt;
                              &lt;span class="input-group-addon" id="basic-addon2"&gt;og&lt;/span&gt;
                              &lt;input type="text" class="form-control" placeholder="Mengde..."&gt;
                              &lt;span class="input-group-addon" id="basic-addon2"&gt;og&lt;/span&gt;
                              &lt;input type="text" class="form-control" placeholder="Enhet..."&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;button class="btn btn-default" type="button"&gt;Legg til!&lt;/button&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
  
                     &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;input type="text" class="form-control largeInput" placeholder="Beskrivelse av fremgangsmåte..."&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;button class="btn btn-default largeInput" type="button"&gt;Legg til!&lt;/button&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;input type="text" class="form-control" placeholder="Beskrivelse av fremgangsmåte, stegvis..."&gt;
                              &lt;span class="input-group-btn"&gt;
                                  &lt;button class="btn btn-default" type="button"&gt;Legg til!&lt;/button&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;button class="btn btn-success newRecipie"&gt;Neste oppskrift!&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/body&gt;
      &lt;script&gt;
          var headingButton = document.getElementsByClassName("btn btn-default") [1];
          var tableButton = document.getElementsByClassName("btn btn-default") [2]
          var newRecipieButton = document.getElementsByClassName("btn btn-success newRecipie") [0];
          var containerFluid = document.getElementsByClassName("container-fluid") [0];
  
          var recipieCounter = 0;
  
          function headingFunction() {
              if (recipieCounter%2 == 0) {
                  recipieName = document.getElementsByClassName("form-control") [1].value;
                  nrPersons = document.getElementsByClassName("form-control") [2].value;
  
                  createJumbotron = document.createElement("div");
                  createJumbotron.className = "jumbotron";
                  containerFluid.appendChild(createJumbotron);
  
                  newJumbotron = document.getElementsByClassName("jumbotron") [1];
                  createPanel = document.createElement("div");
                  createPanel.className = "panel panel-default";
                  newJumbotron.appendChild(createPanel);
  
                  newPanel = document.getElementsByClassName("panel panel-default") [0];
                  createPanelHeading = document.createElement("div");
                  createPanelHeading.className = "panel-heading";
                  newPanel.appendChild(createPanelHeading);
  
                  newPanelHeading = document.getElementsByClassName("panel-heading") [0];
                  createH2 = document.createElement("h2");
                  createH2.className = "headingTwo";
                  newPanelHeading.appendChild(createH2);
  
                  headingTwo = document.getElementsByClassName("headingTwo") [recipieCounter];
                  headingTwo.innerHTML = recipieName + " - " + nrPersons + " personer";
  
                  createTable = document.createElement("TABLE");
                  createTable.classname = "table";
                  newPanel.appendChild(createTable);
  
                  newTable = document.getElementsByClassName("table") [0];
                  createRow = document.createElement("TR");
                  createRow.className = "tableRow";
                  newTable.appendChild(createRow);
  
                  newRow = document.getElementsByClassName("tableRow") [0];
                  createCell = document.createElement("TD");
                  createCell.className = "tableCell";
                  newRow.appendChild(createCell);
  
                  newCell = document.getElementsByClassName("tableCell") [0];
                  newCell.innerHTML = "Hei";
  
                  console.log(recipieName);
                  console.log(nrPersons);
              }else {
  
              }
  
          }
          headingButton.addEventListener("click", headingFunction);
  
          function tableFunction() {
  
  
  
          }
          tableButton.addEventListener("click", tableFunction);
  
          function newRecipie() {
              recipieCounter++;
          }
          newRecipieButton.addEventListener("click", newRecipie);
  
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>