Question

我对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部分是我收到错误的地方＆＃34; TypeError：无法设置属性＆＃39; innerHTML＆＃39;未定义＆＃34;。但是，我使用了alert函数并获得了catalog [0]的值（在Woods中丢失）。看起来代码可能只是在第一次循环之后才会失败，因为我只是第一次通过它才能正常工作。我认为可能是innerHTML完全导致问题，因为当我注释掉A部分时，B部分似乎有相同的错误。请帮我弄清楚这个错误，并且（因为我是初学者，无论是本网站还是Javascript），请告诉我如何从更好的角度处理这个问题。请保持答案对初学者友好（如果可以的话）

Answer 1

您正在父作用域中创建'address'元素，因此在createBooks中您附加相同的元素。添加相同的元素会删除它，然后附加它，这样你就不能拥有第二个div。这就是为什么你的数组长度是2，但你拥有的'地址'DIV的数量只有1。

只需将代码块从

开始移动即可

var address = document.createElement("DIV");

之前的createBooks()内的

document.getElementById("displayBooks").appendChild(address);

以下是runnable片段：

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）使用数组来引用＆inner;内部HTML＆＃39;导致错误

1 个答案: