6

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:

Getting error "Cannot read property 'appendchild' of undefined.

It says so about the line newTable.appendChild(createRow); I cannot seem to figure out what is wrong?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="bootstrap.css">
        <link rel="stylesheet" type="text/css" href="Baksnakk.css">
        <title>Baksnakk.no - Hovedside</title>
    <style></style>
    </head>
    <body>
        <div class="container-fluid">

            <div class="page-header">
                <div class="row">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-4"><h1>Baksnakk.no <small>Slagord.jpg</small></h1></div>
                    <div class="col-lg-4"></div>
                </div>
            </div>

            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-4">
                            <ul class="nav navbar-nav">
                                <li><a href="Baksnakk.html">Hjem</a></li>
                                <li><a href="Baksnakk - Kanelsnurrer.html">Kanelsnurrer</a></li>
                                <li><a href="Baksnakk - Custom.html">Lag din egen oppskrift!</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-5"></div>
                        <div class="col-sm-3">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>

            <div class="jumbotron">
                <div class="row">

                    <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Navn på oppskrift..." aria-describedby="basic-addon2">
                                <span class="input-group-addon" id="basic-addon2">og</span>
                                <input type="number" class="form-control" placeholder="Antall personer...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Legg til!</button>
                                </span>
                            </div>
                    </div>

                   <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Ingrediens..." aria-describedby="basic-addon2">
                            <span class="input-group-addon" id="basic-addon2">og</span>
                            <input type="text" class="form-control" placeholder="Mengde...">
                            <span class="input-group-addon" id="basic-addon2">og</span>
                            <input type="text" class="form-control" placeholder="Enhet...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Legg til!</button>
                            </span>
                        </div>

                   </div>

                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="input-group">
                            <input type="text" class="form-control largeInput" placeholder="Beskrivelse av fremgangsmåte...">
                            <span class="input-group-btn">
                                <button class="btn btn-default largeInput" type="button">Legg til!</button>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Beskrivelse av fremgangsmåte, stegvis...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Legg til!</button>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button class="btn btn-success newRecipie">Neste oppskrift!</button>
                </div>
            </div>
    </body>
    <script>
        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);

    </script>
</html>
5
  • How do we execute your code ? Where is HTML ?
    – Rayon
    Commented Jun 14, 2016 at 17:19
  • 4
    What is your question? Is the error not clear? newTable being undefined means that document.getElementsByClassName("table")[0] returns undefined, which means that you don't have an element with class name table. Looking at where you tried to assign the class name reveals that you have a typo: createTable.classname = "table";. Commented Jun 14, 2016 at 17:19
  • @NikolaiScott That means you need to indent your code. A quick shortcut for that is to highlight all of your not-indented code and hit Ctrl+K.
    – Mike Cluck
    Commented Jun 14, 2016 at 17:24
  • I cant post the code in the post because its not indented by 4 or something. All the other code works exept the line that I have said... Commented Jun 14, 2016 at 17:26
  • Okay I made it. Thanks for the helpful downvotes in these dire times ! Commented Jun 14, 2016 at 17:27

1 Answer 1

14

This error is self-descriptive. It is telling you that createTable is undefined (has no value), and therefore you cannot access appendChild() on it. The line

newTable = document.getElementsByClassName("table")[0];

Is therefore not finding an element with class table.

This could happen if the DOM isn't loaded at the time of script execution. To avoid this, wrap all of your DOM-manipulating code in a window.onload block:

window.onload = function(){
    // your JS here
}

EDIT looking at your markup it seems that wasn't the problem, but I'll keep my answer here for posterity. Also, getElementsByClassName is not the preferred way of selecting elements. Typically if you want to uniquely identify an element you use an id and getElementById.

6
  • I am going to add some text from an array later on and I thought that using getElementByClassName was most useful because I could use for loops later on. Commented Jun 14, 2016 at 17:34
  • gEBCNis absolutely preferred for cases where it makes sense to select by class. Not everything needs to, or should, have an ID. That said, @NikolaiScott doesn't need to do DOM selection at all, since the element being fetched is already being held by a variable! It should just be createTable.appendChild(createRow);
    – user1106925
    Commented Jun 14, 2016 at 17:37
  • Well, there was the solution! Thanks @squint! I still want to do it the way I did before though. Because that way I would have been able to push everything down using a variable... Commented Jun 14, 2016 at 17:45
  • You're welcome @NikolaiScott. Be sure to apply the same solution to other parts of your code where you're unnecessarily fetching from the DOM.
    – user1106925
    Commented Jun 14, 2016 at 17:48
  • window.onload = function() {} was the issue for me, thanks for leaving it here :)
    – Zax
    Commented Jan 10, 2018 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.