由javascript创建的html元素不在页面上显示

Question

我对JavaScript很新颖。我正尝试通过javascript为类项目创建html元素，但是在我的页面上没有显示任何内容。我可能会丢失一些基本的东西，我将不胜感激所有帮助，并会留意

HTML

<div id="shirts"></div> 

的JavaScript

function shirt(name, stock, price, image) { 
    this.name = name; 
    this.stock = stock; 
    this.price = price; 
    this.image = image; 
} 


var shirtArray = []; 

var whiteShirt = new shirt ("White Shirt", 19, 20.00, "img/whiteT.jpg") 
var orangeShirt = new shirt ("Orange Shirt", 4, 20.00, "img/orangeT.jpg") 
var yellowShirt = new shirt ("Yellow Shirt", 3, 20.00, "img/yellowT.jpg") 
var blackShirt = new shirt ("Black Shirt", 6, 20.00, "img/blackT.jpg") 
var greenShirt = new shirt ("Green Shirt", 12, 20.00, "img/greenT.jpg") 
var purpleShirt = new shirt ("Purple Shirt", 0, 20.00, "img/purpleT.jpg") 

// push objects into array 

shirtArray.push(whiteShirt, orangeShirt, yellowShirt, blackShirt, greenShirt, purpleShirt) 

for(var i = 0; i < shirtArray.length; i++) { 
    var textName = document.createTextNode (shirtArray[i].name) 
    var textStock = document.createTextNode ("Avilable " + shirtArray[i].stock) 
    var textPrice = document.createTextNode (shirtArray[i].price) 
    var addtCart = document.createTextNode("Add to cart") 
    var shirtImg = shirtArray[i].image 

    var addItem = document.createElement('div') 
    var newDiv = document.createElement('div') 
    var nameH1 = document.createElement('h1') 
    var stockH3 = document.createElement('h3') 
    var priceH4 = document.createElement('h4') 
    var addCart = document.createElement('button') 
    var image = document.createElement('img') 

    nameH1.appendChild(textName) 
    stockH3.appendChild(textStock) 
    priceH4.appendChild(textPrice) 
    addCart.appendChild(addtCart) 
    addCart.ClassName = "btn btn-warning" 
    img.src = shirtImg 
    image.ClassName = "img-responsive" 

    addItem.ClassName = "col-sm-4" 
    newDiv.ClassName = "shirts shirtBrand" + i + " thumbnail " 
    newDiv.appendChild(nameH1) 
    newDiv.appendChild(stockH3) 
    newDiv.appendChild(priceH4) 
    newDiv.appendChild(addCart) 
    addItem.appendChild(newDiv) 

    document.getElementById("shirts").appendChild(addItem) 
} 

Answer 1

正确splle荷兰国际集团在shirtArray.length，也img是undefined.You创建变量image和使用img代替that.Change可变img到image和追加image您div

function shirt(name, stock, price, image) { 
 
    this.name = name; 
 
    this.stock = stock; 
 
    this.price = price; 
 
    this.image = image; 
 
} 
 

 

 
var shirtArray = []; 
 

 
var whiteShirt = new shirt ("White Shirt", 19, 20.00, "img/whiteT.jpg") 
 
var orangeShirt = new shirt ("Orange Shirt", 4, 20.00, "img/orangeT.jpg") 
 
var yellowShirt = new shirt ("Yellow Shirt", 3, 20.00, "img/yellowT.jpg") 
 
var blackShirt = new shirt ("Black Shirt", 6, 20.00, "img/blackT.jpg") 
 
var greenShirt = new shirt ("Green Shirt", 12, 20.00, "img/greenT.jpg") 
 
var purpleShirt = new shirt ("Purple Shirt", 0, 20.00, "img/purpleT.jpg") 
 

 
/* push objects into array*/ 
 
    
 
shirtArray.push(whiteShirt, orangeShirt, yellowShirt, blackShirt, greenShirt, purpleShirt) 
 

 
for(var i = 0; i < shirtArray.length; i++) { 
 
    var textName = document.createTextNode (shirtArray[i].name) 
 
    var textStock = document.createTextNode ("Avilable " + shirtArray[i].stock) 
 
    var textPrice = document.createTextNode (shirtArray[i].price) 
 
    var addtCart = document.createTextNode("Add to cart") 
 
    var shirtImg = shirtArray[i].image 
 

 
    var addItem = document.createElement('div') 
 
    var newDiv = document.createElement('div') 
 
    var nameH1 = document.createElement('h1') 
 
    var stockH3 = document.createElement('h3') 
 
    var priceH4 = document.createElement('h4') 
 
    var addCart = document.createElement('button') 
 
    var image = document.createElement('img') 
 

 
addItem.className ="grid"; 
 
    
 
    nameH1.appendChild(textName) 
 
    stockH3.appendChild(textStock) 
 
    priceH4.appendChild(textPrice) 
 
    addCart.appendChild(addtCart) 
 
    addCart.ClassName = "btn btn-warning" 
 
    
 
    image.src = shirtImg 
 
    image.ClassName = "img-responsive" 
 

 
    addItem.ClassName = "col-sm-4" 
 
    newDiv.ClassName = "shirts shirtBrand" + i + " thumbnail " 
 
    newDiv.appendChild(nameH1) 
 
    addItem.appendChild(image) 
 
    newDiv.appendChild(stockH3) 
 
    newDiv.appendChild(priceH4) 
 
    newDiv.appendChild(addCart) 
 
    addItem.appendChild(newDiv) 
 

 
    document.getElementById("shirts").appendChild(addItem) 
 
}

.grid{ 
 
    border:1px solid #ddd; 
 
    float:left; 
 
    width:150px; 
 
    height:150px; 
 
}

<div id="shirts"></div>

Answer 2

为（VAR I = 0;我< shirgtArray.length;我++ ）

shirt上的拼写错误Array.length

Answer 3

Below is the correct working code 

<div id="shirts"></div> 
<script type="text/javascript"> 

function shirt(name, stock, price, image) { 
    this.name = name; 
    this.stock = stock; 
    this.price = price; 
    this.image = image; 
} 


var shirtArray = []; 

var whiteShirt = new shirt ("White Shirt", 19, 20.00, "img/whiteT.jpg") 
var orangeShirt = new shirt ("Orange Shirt", 4, 20.00, "img/orangeT.jpg") 
var yellowShirt = new shirt ("Yellow Shirt", 3, 20.00, "img/yellowT.jpg") 
var blackShirt = new shirt ("Black Shirt", 6, 20.00, "img/blackT.jpg") 
var greenShirt = new shirt ("Green Shirt", 12, 20.00, "img/greenT.jpg") 
var purpleShirt = new shirt ("Purple Shirt", 0, 20.00, "img/purpleT.jpg") 

// push objects into array 

shirtArray.push(whiteShirt, orangeShirt, yellowShirt, blackShirt, greenShirt, purpleShirt); 

for(var i = 0; i < shirtArray.length; i++) { 
    var textName = document.createTextNode (shirtArray[i].name) 
    var textStock = document.createTextNode ("Avilable " + shirtArray[i].stock) 
    var textPrice = document.createTextNode (shirtArray[i].price) 
    var addtCart = document.createTextNode("Add to cart") 
    var shirtImg = shirtArray[i].image 

    var addItem = document.createElement('div') 
    var newDiv = document.createElement('div') 
    var nameH1 = document.createElement('h1') 
    var stockH3 = document.createElement('h3') 
    var priceH4 = document.createElement('h4') 
    var addCart = document.createElement('button') 
    var image = document.createElement('img') 

    nameH1.appendChild(textName) 
    stockH3.appendChild(textStock) 
    priceH4.appendChild(textPrice) 
    addCart.appendChild(addtCart) 
    addCart.ClassName = "btn btn-warning" 
    image.src = shirtImg 
    image.ClassName = "img-responsive" 

    addItem.ClassName = "col-sm-4" 
    newDiv.ClassName = "shirts shirtBrand" + i + " thumbnail " 
    newDiv.appendChild(nameH1) 
    newDiv.appendChild(stockH3) 
    newDiv.appendChild(priceH4) 
    newDiv.appendChild(addCart) 
    addItem.appendChild(newDiv) 

    document.getElementById("shirts").appendChild(addItem) 
} 

</script>