-2
我提出這個網站分享自己的食譜我正在上面輸入字段屬性‘的appendChild’，這是JavaScript它會返回錯誤：。得到錯誤「無法讀取的不確定
Getting error "Cannot read property 'appendchild' of undefined.
它這樣說對線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>
我們如何執行您的代碼？ 「HTML」在哪裏？ – Rayon
你的問題是什麼？錯誤不明確嗎？ 'newTable'爲'undefined'意味着document.getElementsByClassName（「table」）[0]'返回undefined，這意味着你沒有一個**類名爲** table的元素。看看你試圖分配類名的地方，發現你有一個錯字：'createTable.classname =「table」;'。 –
@NikolaiScott這意味着你需要縮進你的代碼。一個快捷方式是突出顯示所有未縮進的代碼並按下Ctrl + K。 –