2017-02-12 42 views
-1

我對JavaScript比較陌生,但決定將圖書館網站作爲我的第一個項目。在製作上述項目時,我試圖通過數組中的值設置innerHTML時遇到了錯誤。這是我(亂)代碼:(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部分是從哪裏獲得我的錯誤,指出「類型錯誤:無法設置屬性未定義‘的innerHTML’」。但是,我使用了警報功能,並獲得了目錄[0](Lost in the Woods)中的值。也似乎代碼可能只會在第一次循環後失敗,因爲我只是在第一次通過時才正常工作。我認爲這可能是innerHTML完全導致問題的原因,因爲當我註釋掉部分A時,部分B似乎具有相同的錯誤。 請幫我弄清楚這個錯誤,還有(因爲我是初學者,對本網站和Javascript都有幫助),告訴我如何從更好的角度來處理這個問題。並且請保持答案對初學者友好(如果可以的話)

+0

你的while循環條件是'x

+0

這裏是[SoloLearn](https://code.sololearn.com/WpZyzqUe11A5)上的鏈接 – SirLucidus

+0

嘗試使用'innerText' –

回答

1

您在父作用域中創建'address'元素,所以在createBooks中您將追加相同的元素。附加相同的元素將刪除它,然後附加它,以便您不能在那裏有第二個div。這就是爲什麼你的數組長度爲2,但你有「地址」的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>