Javascript 出现错误“无法读取未定义的属性‘appendchild’
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37818361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting error "Cannot read property 'appendchild' of undefined
提问by Nikolai Scott
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:
我正在制作这个网站来分享你自己的食谱。我正在制作上面的输入字段，这是 javascript。它返回错误：
Getting error "Cannot read property 'appendchild' of undefined.
出现错误“无法读取未定义的属性‘appendchild’。
It says so about the line newTable.appendChild(createRow);I cannot seem to figure out what is wrong?
它这么说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>
回答by Luke
This error is self-descriptive. It is telling you that createTableis undefined (has no value), and therefore you cannot access appendChild()on it. The line
此错误是自我描述性的。它告诉您这createTable是未定义的（没有价值），因此您无法访问appendChild()它。线
newTable = document.getElementsByClassName("table")[0];
Is therefore not finding an element with class table.
因此没有找到带有 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.onloadblock:
如果在脚本执行时未加载 DOM，则可能会发生这种情况。为避免这种情况，请将所有 DOM 操作代码包装在一个window.onload块中：
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 prosperity. Also, getElementsByClassNameis not the preferred way of selecting elements. Typically if you want to uniquely identify an element you use an idand getElementById.
编辑查看您的标记似乎不是问题，但为了繁荣，我会在这里保留我的答案。此外，getElementsByClassName也不是选择元素的首选方式。通常，如果您想唯一标识一个元素，请使用id和getElementById。
