(Javascript)使用数组引用'innerHTML'导致错误
(Javascript) Using an array to reference 'innerHTML' caused an error
我对 Javascript 比较陌生，但我决定将图书馆网站作为我的第一个项目。在制作上述项目时，当我尝试通过数组中的值设置 innerHTML 时遇到错误。这是我的（凌乱的）代码：
var catalog = [];
function book (title, firstName, lastName, number, publisher, image, checkedOut) {
this.title = title;
this.firstName = firstName;
this.lastName = lastName;
this.number = number;
this.publisher = publisher;
this.image = image;
this.isCheckedOut = checkedOut;
}
function addToCatalog (entry){
entry.number = catalog.length ;
catalog[entry.number] = entry;
}
$newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false);
addToCatalog($newbook);
$newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false);
addToCatalog($newbook);
var address = document.createElement("DIV");
address.setAttribute("class", "eachBook");
var picture = document.createElement("img");
picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" );
picture.setAttribute("class", "bookImg");
picture.setAttribute("alt", "Auburn Library Book");
var gtitle = document.createElement("h4");
gtitle.setAttribute("class", "bTitle");
var dname = document.createElement("p");
dname.setAttribute("class", "bName");
var button = document.createElement("button");
button.setAttribute("class", "checkout");
checkout = document.createTextNode("Checkout");
button.appendChild(checkout);
//Text in button
var available = document.createElement("p");
available.setAttribute("class", "available");
avail = document.createTextNode("Available");
available.appendChild(avail);
//text in available
function createBooks(){
document.getElementById("displayBooks").appendChild(address);
address.appendChild(picture);
address.appendChild(gtitle);
address.appendChild(dname);
address.appendChild(button);
address.appendChild(available);
}
function write(){
var x = 0;
var arr;
while (x < catalog.length){
createBooks();
arr = document.getElementsByClassName("bTitle");
arr[x].innerHTML = catalog[x].title; //Part A
arr = document.getElementsByClassName("bName");
arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B
arr = document.getElementsByTagName("img");
arr[x].src = catalog[x].image;
x++;
}
}
window.onload = function(){
write();
};
在 A 部分，我的错误是 "TypeError: Cannot set property 'innerHTML' of undefined"。但是，我使用了警报功能并获得了 catalog[0]（Lost in the Woods）的值。似乎代码可能只会在第一次通过循环后失败，因为我只是在第一次通过时才能正常工作。我认为这可能完全是 innerHTML 引起的问题，因为当我注释掉 A 部分时，B 部分似乎有同样的错误。
请帮我弄清楚这个错误，并且（因为我是这个网站和 Javascript 的初学者），请告诉我如何从更好的角度解决这个问题。也请让答案对初学者友好（如果可以的话）
您正在父范围中创建 'address' 元素，因此在 createBooks 中您将追加相同的元素。追加相同的元素会删除它然后追加它，所以你不能在那里有第二个 div 。这就是为什么你的数组长度是 2 但你拥有的 'address' DIV 的数量只有 1.
只需移动以
开头的代码块
var address = document.createElement("DIV");
在 createBooks() 内，在
之前
document.getElementById("displayBooks").appendChild(address);
这是可运行的片段：
var catalog = [];
function book (title, firstName, lastName, number, publisher, image, checkedOut) {
this.title = title;
this.firstName = firstName;
this.lastName = lastName;
this.number = number;
this.publisher = publisher;
this.image = image;
this.isCheckedOut = checkedOut;
}
function addToCatalog (entry){
entry.number = catalog.length ;
catalog[entry.number] = entry;
}
$newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false);
addToCatalog($newbook);
$newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false);
addToCatalog($newbook);
function createBooks(){
var address = document.createElement("DIV");
address.setAttribute("class", "eachBook");
var picture = document.createElement("img");
picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" );
picture.setAttribute("class", "bookImg");
picture.setAttribute("alt", "Auburn Library Book");
var gtitle = document.createElement("h4");
gtitle.setAttribute("class", "bTitle");
var dname = document.createElement("p");
dname.setAttribute("class", "bName");
var button = document.createElement("button");
button.setAttribute("class", "checkout");
checkout = document.createTextNode("Checkout");
button.appendChild(checkout);
//Text in button
var available = document.createElement("p");
available.setAttribute("class", "available");
avail = document.createTextNode("Available");
available.appendChild(avail);
//text in available
document.getElementById("displayBooks").appendChild(address);
address.appendChild(picture);
address.appendChild(gtitle);
address.appendChild(dname);
address.appendChild(button);
address.appendChild(available);
}
function write(){
var x = 0;
var arr;
while (x < catalog.length){
createBooks();
arr = document.getElementsByClassName("bTitle");
arr[x].innerHTML = catalog[x].title;//Part A
arr = document.getElementsByClassName("bName");
arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B
arr = document.getElementsByTagName("img");
arr[x].src = catalog[x].image;
x++;
}
}
window.onload = function(){
write();
};
body {
background-color: #F5EBEB;
}
#header {
background-image: url("http://il2.picdn.net/shutterstock/videos/2990449/thumb/1.jpg") ;
font-family: Rockwell, Tahoma, Arial;
color: #FFFFFF;
display: block;
}
#header p{
font-family: Arial, "Times New Roman";
}
#panel{
background-color: #922724;
font-family: Rockwell, Arial;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
}
.dropdown{
display: block;
position: relative;
}
.dropbtn{
background-color: #FFFFFF;
border: none;
color: #922724;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Rockwell;
font-weight: bold;
}
.dropbtn:hover{
color: #700502;
}
.content{
background-color: #FFFFFF;
border: none;
color: #922724;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: Rockwell;
overflow: auto;
position: relative;
display: none;
}
.content li{
color: black;
display: block;
float: left;
position: relative;
cursor: pointer;
}
.dropdown:hover .content{
display: inline-block;
}
.content li:hover{
background-color: #DDDDDD;
display: block;
}
#displayBooks{
font-family: Rockwell;
border-color: #1B0807;
border-style: solid;
border-width: 3px;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
}
.eachBook{
font-family: Rockwell;
background-color: #FFFEFF;
border-style: solid none solid none;
border-color: #DDD;
border-width: 2px;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
overflow: auto;
}
.eachBook h4{
font-size: 20px
}
.bookImg{
width: 150px;
height:225px;
overflow: auto;
float: left;
margin: 5px 5px 5px 5px ;
}
.checkout{
background-color: #DDDDDD;
border: none;
color: #922724;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Rockwell;
font-weight: bold;
}
.checkout:hover{
background-color: #922724;
color: #FFFFFF;
}
.available{
color: #2F2;
font-weight: bold;
}
.unavailable{
color: #F22;
font-weight: bold;
}
<div id="header">
<h1>Welcome to Auburn Library</h1>
<p>Where knowledge is truly power.</p>
</div>
<div id="panel">
<div class="dropdown">
<button class ="dropbtn">Display Books...</button>
<ul class="content">
<li> Alphabeticaly (A - Z) </li>
<li> Alphabeticaly (Z - A)</li>
<li> By Author (A - Z)</li>
<li> By Author (Z - A)</li>
<li> By Number (Low - High)</li>
<li> By Number (High - Low)</li>
</ul>
</div>
<form>
</form>
<!-- Right next to it is a checkbox: only "in" books or all books -->
</div>
<div id="displayBooks">
<h2 style="text-align: center;">Book Catalog </h2>
</div>
我对 Javascript 比较陌生，但我决定将图书馆网站作为我的第一个项目。在制作上述项目时，当我尝试通过数组中的值设置 innerHTML 时遇到错误。这是我的（凌乱的）代码：
var catalog = [];
function book (title, firstName, lastName, number, publisher, image, checkedOut) {
this.title = title;
this.firstName = firstName;
this.lastName = lastName;
this.number = number;
this.publisher = publisher;
this.image = image;
this.isCheckedOut = checkedOut;
}
function addToCatalog (entry){
entry.number = catalog.length ;
catalog[entry.number] = entry;
}
$newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false);
addToCatalog($newbook);
$newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false);
addToCatalog($newbook);
var address = document.createElement("DIV");
address.setAttribute("class", "eachBook");
var picture = document.createElement("img");
picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" );
picture.setAttribute("class", "bookImg");
picture.setAttribute("alt", "Auburn Library Book");
var gtitle = document.createElement("h4");
gtitle.setAttribute("class", "bTitle");
var dname = document.createElement("p");
dname.setAttribute("class", "bName");
var button = document.createElement("button");
button.setAttribute("class", "checkout");
checkout = document.createTextNode("Checkout");
button.appendChild(checkout);
//Text in button
var available = document.createElement("p");
available.setAttribute("class", "available");
avail = document.createTextNode("Available");
available.appendChild(avail);
//text in available
function createBooks(){
document.getElementById("displayBooks").appendChild(address);
address.appendChild(picture);
address.appendChild(gtitle);
address.appendChild(dname);
address.appendChild(button);
address.appendChild(available);
}
function write(){
var x = 0;
var arr;
while (x < catalog.length){
createBooks();
arr = document.getElementsByClassName("bTitle");
arr[x].innerHTML = catalog[x].title; //Part A
arr = document.getElementsByClassName("bName");
arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B
arr = document.getElementsByTagName("img");
arr[x].src = catalog[x].image;
x++;
}
}
window.onload = function(){
write();
};
在 A 部分，我的错误是 "TypeError: Cannot set property 'innerHTML' of undefined"。但是，我使用了警报功能并获得了 catalog[0]（Lost in the Woods）的值。似乎代码可能只会在第一次通过循环后失败，因为我只是在第一次通过时才能正常工作。我认为这可能完全是 innerHTML 引起的问题，因为当我注释掉 A 部分时，B 部分似乎有同样的错误。 请帮我弄清楚这个错误，并且（因为我是这个网站和 Javascript 的初学者），请告诉我如何从更好的角度解决这个问题。也请让答案对初学者友好（如果可以的话）
您正在父范围中创建 'address' 元素，因此在 createBooks 中您将追加相同的元素。追加相同的元素会删除它然后追加它，所以你不能在那里有第二个 div 。这就是为什么你的数组长度是 2 但你拥有的 'address' DIV 的数量只有 1.
只需移动以
开头的代码块var address = document.createElement("DIV");
在 createBooks() 内，在
document.getElementById("displayBooks").appendChild(address);
这是可运行的片段：
var catalog = [];
function book (title, firstName, lastName, number, publisher, image, checkedOut) {
this.title = title;
this.firstName = firstName;
this.lastName = lastName;
this.number = number;
this.publisher = publisher;
this.image = image;
this.isCheckedOut = checkedOut;
}
function addToCatalog (entry){
entry.number = catalog.length ;
catalog[entry.number] = entry;
}
$newbook = new book("Lost in the Woods", "Hubert", "Holmes", "3", "Junior Scholastic", "https://marketplace.canva.com/MAB5W63LDsw/1/0/thumbnail_large/canva-woods-thriller-e-book-cover-MAB5W63LDsw.jpg", false);
addToCatalog($newbook);
$newbook = new book("To Kill A Mockingbird", "Harper", "Lee", "1", "Junior Scholastic", "https://s-media-cache-ak0.pinimg.com/736x/a0/96/ff/a096ff3bafb7786b59ef9ba9d3e7ddf2.jpg", false);
addToCatalog($newbook);
function createBooks(){
var address = document.createElement("DIV");
address.setAttribute("class", "eachBook");
var picture = document.createElement("img");
picture.setAttribute("src", "http://www.iconsdb.com/icons/preview/gray/literature-xxl.png" );
picture.setAttribute("class", "bookImg");
picture.setAttribute("alt", "Auburn Library Book");
var gtitle = document.createElement("h4");
gtitle.setAttribute("class", "bTitle");
var dname = document.createElement("p");
dname.setAttribute("class", "bName");
var button = document.createElement("button");
button.setAttribute("class", "checkout");
checkout = document.createTextNode("Checkout");
button.appendChild(checkout);
//Text in button
var available = document.createElement("p");
available.setAttribute("class", "available");
avail = document.createTextNode("Available");
available.appendChild(avail);
//text in available
document.getElementById("displayBooks").appendChild(address);
address.appendChild(picture);
address.appendChild(gtitle);
address.appendChild(dname);
address.appendChild(button);
address.appendChild(available);
}
function write(){
var x = 0;
var arr;
while (x < catalog.length){
createBooks();
arr = document.getElementsByClassName("bTitle");
arr[x].innerHTML = catalog[x].title;//Part A
arr = document.getElementsByClassName("bName");
arr[x].innerHTML = catalog[x].firstName +" "+ catalog[x].lastName;//Part B
arr = document.getElementsByTagName("img");
arr[x].src = catalog[x].image;
x++;
}
}
window.onload = function(){
write();
};
body {
background-color: #F5EBEB;
}
#header {
background-image: url("http://il2.picdn.net/shutterstock/videos/2990449/thumb/1.jpg") ;
font-family: Rockwell, Tahoma, Arial;
color: #FFFFFF;
display: block;
}
#header p{
font-family: Arial, "Times New Roman";
}
#panel{
background-color: #922724;
font-family: Rockwell, Arial;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
}
.dropdown{
display: block;
position: relative;
}
.dropbtn{
background-color: #FFFFFF;
border: none;
color: #922724;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Rockwell;
font-weight: bold;
}
.dropbtn:hover{
color: #700502;
}
.content{
background-color: #FFFFFF;
border: none;
color: #922724;
padding: 5px 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: Rockwell;
overflow: auto;
position: relative;
display: none;
}
.content li{
color: black;
display: block;
float: left;
position: relative;
cursor: pointer;
}
.dropdown:hover .content{
display: inline-block;
}
.content li:hover{
background-color: #DDDDDD;
display: block;
}
#displayBooks{
font-family: Rockwell;
border-color: #1B0807;
border-style: solid;
border-width: 3px;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
}
.eachBook{
font-family: Rockwell;
background-color: #FFFEFF;
border-style: solid none solid none;
border-color: #DDD;
border-width: 2px;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px ;
overflow: auto;
}
.eachBook h4{
font-size: 20px
}
.bookImg{
width: 150px;
height:225px;
overflow: auto;
float: left;
margin: 5px 5px 5px 5px ;
}
.checkout{
background-color: #DDDDDD;
border: none;
color: #922724;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Rockwell;
font-weight: bold;
}
.checkout:hover{
background-color: #922724;
color: #FFFFFF;
}
.available{
color: #2F2;
font-weight: bold;
}
.unavailable{
color: #F22;
font-weight: bold;
}
<div id="header">
<h1>Welcome to Auburn Library</h1>
<p>Where knowledge is truly power.</p>
</div>
<div id="panel">
<div class="dropdown">
<button class ="dropbtn">Display Books...</button>
<ul class="content">
<li> Alphabeticaly (A - Z) </li>
<li> Alphabeticaly (Z - A)</li>
<li> By Author (A - Z)</li>
<li> By Author (Z - A)</li>
<li> By Number (Low - High)</li>
<li> By Number (High - Low)</li>
</ul>
</div>
<form>
</form>
<!-- Right next to it is a checkbox: only "in" books or all books -->
</div>
<div id="displayBooks">
<h2 style="text-align: center;">Book Catalog </h2>
</div>