Javascript 获取错误“；无法读取属性'；追加儿童'；未定义的_Javascript

Javascript 获取错误“；无法读取属性'；追加儿童'；未定义的

javascript

Javascript 获取错误“；无法读取属性'；追加儿童'；未定义的,javascript,Javascript,我制作这个网站是为了分享你自己的食谱。我在上面创建输入字段，这是javascript。它返回错误：获取错误“无法读取未定义的属性'appendchild' 关于行newTable.appendChild（createRow）；我似乎不知道出了什么问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"

我制作这个网站是为了分享你自己的食谱。我在上面创建输入字段，这是javascript。它返回错误：

获取错误“无法读取未定义的属性'appendchild'

关于行

newTable.appendChild（createRow）；

我似乎不知道出了什么问题

<!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>


Baksnakk.no-Hovedside
Baksnakk.no Slagord.jpg





提交
奥格
拉格·蒂尔！
奥格
奥格
拉格·蒂尔！
拉格·蒂尔！
拉格·蒂尔！
内斯特·奥普斯克里夫！
var headingButton=document.getElementsByClassName（“btn btn默认值”）[1]；
var tableButton=document.getElementsByClassName（“btn btn默认值”）[2]
var newRecipieButton=document.getElementsByClassName（“btn btn success newRecipie”）[0]；
var containerFluid=document.getElementsByClassName（“容器流体”）[0]；
var recipieCounter=0；
函数头函数（）{
如果（收件人计数%2==0）{
recipieName=document.getElementsByClassName（“表单控件”）[1]。值；
nrPersons=document.getElementsByClassName（“表单控件”）[2]。值；
createJumbotron=document.createElement（“div”）；
createJumbotron.className=“jumbotron”；
containerFluid.appendChild（createJumbotron）；
newJumbotron=document.getElementsByClassName（“jumbotron”）[1]；
createPanel=document.createElement（“div”）；
createPanel.className=“面板默认值”；
newJumbotron.appendChild（createPanel）；
newPanel=document.getElementsByClassName（“面板默认值”）[0]；
createPanelHeading=document.createElement（“div”）；
createPanelHeading.className=“面板标题”；
newPanel.appendChild（createPanelHeading）；
newPanelHeading=document.getElementsByClassName（“面板标题”）[0]；
createH2=document.createElement（“h2”）；
createH2.className=“headingTwo”；
newPanelHeading.appendChild（createH2）；
headingTwo=document.getElementsByClassName（“headingtw”）[recipieCounter]；
headingTwo.innerHTML=recipieName+“-”+nrPersons+“personer”；
createTable=document.createElement（“表格”）；
createTable.classname=“表格”；
appendChild（createTable）；
newTable=document.getElementsByClassName（“表”）[0]；
createRow=document.createElement（“TR”）；
createRow.className=“tableRow”；
newTable.appendChild（createRow）；
newRow=document.getElementsByClassName（“tableRow”）[0]；
createCell=document.createElement（“TD”）；
createCell.className=“tableCell”；
appendChild（createCell）；
newCell=document.getElementsByClassName（“tableCell”）[0]；
newCell.innerHTML=“Hei”；
console.log（recipieName）；
控制台日志（NR人）；
}否则{
}
}
headingButton.addEventListener（“单击”，headingFunction）；
函数表函数（）{
}
tableButton.addEventListener（“单击”，tableFunction）；
函数newRecipie（）{
recipieCounter++；
}
newRecipieButton.addEventListener（“单击”，newRecipie）；

此错误是自描述性的。它告诉您，

createTable

未定义（没有值），因此您无法在其上访问

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

因此，找不到具有classtable
的元素
如果在脚本执行时没有加载DOM，可能会发生这种情况。为了避免这种情况，请将所有DOM操作代码包装在window.onloa中
window.onload = function(){
    // your JS here
}