Reputation: 83

Getting error "Cannot read property 'appendchild' of undefined

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>

Upvotes: 6

Answers (1)

zfj3ub94rf576hc4eegm

Reputation: 1273

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.

Upvotes: 14

Getting error &quot;Cannot read property &#39;appendchild&#39; of undefined

Answers (1)

Related Questions

Getting error "Cannot read property 'appendchild' of undefined