由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

正確地在shirtArray.length中shirtArray.length ，並且img也未定義。您已經創建了變量image並使用img代替了它。將變量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

for（var i = 0; i <shirgtArray.length; i ++）

ShirtArray.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>