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)
}
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>
for(var i = 0; i < shirgtArray.length; i++)
spelling mistake on shirtArray.length
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.