html - Adding JavaScript List to the webpage -
in class, our assignment create grocery list of fruit , prices placing objects array. did part, i'm supposed extend shopping cart program last lab. set basic html page append items , prices shopping list page." got lost. can use vanilla javascript. ** able webpage display total button, , works(it calculated items), list of groceries , prices?!
my code:
var fruita = { name: 'apple', price: 5 }; var fruitb = { name: 'pear', price:3 }; var fruitc = { name: 'orange', price: 4 }; var grocery = []; grocery.push(fruita, fruitb, fruitc); var total = (fruita.price + fruitb.price +fruitc.price); (i=0; i<grocery.length; i++){ console.log(grocery[i].name); console.log(grocery[i].price); } var total = (fruita.price + fruitb.price +fruitc.price); console.log("total price= " + total); function calctotal() { document.getelementbyid("total").innerhtml = total; } function displaylist() { document.write(grocery).innerhtml = grocery; in html:
<head> <script src="monday2assn2.js"></script> </head> <body> <h1> shopping list </h1> <p>click "total" add shopping list.</p> <button onclick="calctotal()">total</button> <p id="total"> </p>
one way start create global function standardizes method adding elements page. here functions can used add element parent element:
function addelement(type,content,parent) { var newelement = document.createelement(type); var newcontent = document.createtextnode(content); newelement.appendchild(newcontent); get(parent,'id'); current.insertbefore(newelement,current.childnodes[0]); } function get(reference, type) { switch(type) { case 'id': current = document.getelementbyid(reference); break; case 'class': current = document.getelementsbyclassname(reference); break; case 'tag': current = document.getelementsbytagname(reference); break; } } i copied , pasted own files, use these frequently. get function used select elements. addelement function used create new element. "type" parameter specifies tag - p, div, span, etc. "content" , "parent" pretty straightforward. "parent" parameter represented id of parent. once done, can so:
for(var i=0;i<grocery.length;i++) { var concat = 'item: ' + grocery[i].name + ' price: ' + grocery[i].price; addelement('p',concat,'body'); //assign body tag id of "body" } an alternate method set innerhtml of body add it.
get('body','id'); var joined = current.innerhtml; //all elements in string for(var i=0;i<grocery.length;i++) { var concat = 'item: ' + grocery[i].name + ' price: ' + grocery[i].price; joined += concat; } current.innerhtml = joined; of course, if you'd specify more how want data formatted in html. don't fear vanilla javascript - find easier using libraries things this, , people become reliant on libraries forget roots of js.
Comments
Post a Comment