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

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

在shirtArray.length上拼写错误

Answer 2

shirtArray.length和img中的正确splleing未定义。您已创建变量image并使用img代替。{变量img更改为{ {1}}并将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;
}

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>

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

3 个答案: