我正在建立这个网站来分享你自己的食谱。我正在上面输入字段，这是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>
答案 0 :(得分：7)
此错误是自我描述性的。它告诉您createTable未定义（没有值），因此您无法访问appendChild()。这条线
newTable = document.getElementsByClassName("table")[0];
因此找不到类table的元素。
如果在脚本执行时未加载DOM，则可能发生这种情况。为避免这种情况，请将所有DOM操作代码包装在window.onload块中：
window.onload = function(){
// your JS here
}
getElementsByClassName不是选择元素的首选方式。通常，如果您想要唯一标识元素，请使用id和getElementById。