出现错误“无法读取未定义的属性'appendchild'
[英]Getting error "Cannot read property 'appendchild' of undefined
问题描述
我正在本网站上分享您自己的食谱。 我在上面输入字段，这是JavaScript。 它返回错误：
正在获取错误“无法读取未定义的属性'appendchild'。
它说的是newTable.appendChild(createRow);行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>
1 个解决方案
解决方案1
8 2016-06-14 17:27:42
此错误是自我描述的。 它告诉您createTable是未定义的（没有值），因此无法访问它的appendChild() 。 线
newTable = document.getElementsByClassName("table")[0];
因此，找不到带有class table的元素。
如果在脚本执行时未加载DOM，则可能会发生这种情况。 为避免这种情况，请将所有DOM操作代码包装在window.onload块中：
window.onload = function(){
// your JS here
}
编辑查看您的标记，这似乎不是问题，但是为了繁荣，我将在这里保留我的答案。 另外， getElementsByClassName不是选择元素的首选方法。 通常，如果要唯一地标识元素，请使用id和getElementById 。
返回的appendChild无法读取未定义的属性'containerDiv'
[英]appendChild returning Cannot read property 'containerDiv' of undefined
获取错误'无法读取属性'getAttribute'of undefined'
[英]Getting error 'Cannot read property 'getAttribute' of undefined'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.