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

Question

I'm quite new to javascript. I am trying to create html elements through javascript for a class project but nothing is showing on my page. I may be missing something basic and I would appreciate all help and will take note

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

Correct splleing in shirtArray.length and also img is undefined.You have created variable image and using img instead of that.Change variable img to image and append image to your 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++)

spelling mistake on 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>