CODEWITHSUNDEEP
jqueryhtml
Shane D'Silva
Shane D'Silva

Reputation: 453

Replace contents within a div using JQuery

I'm making a small grocery shopping app.

I want to make a page where the user see his/her shopping cart contents on clicking a button.

I created the template where the contents should show up in the white space. My idea is to store every item the user chooses in an array. For example:

var items = ["1 Chicken", "2 Tomatoes", "3 Spinach"]

Using this array I want to add these items line by line in the white space and then present the total amount to be paid. Kind of like a receipt. I'm not sure how to do this using JQuery.

Also, the contents of the should be empty when there's no items in the cart.

I did some research and I think I'm supposed to .html()? Though, I'm not sure about the logic behind what I want to achieve.

Here's the fiddle of the template. (The cdn links aren't working for some reason)

Could someone please help me with the logic?

Upvotes: 0

Views: 41

Answers (1)

vS12
vS12

Reputation: 310

EDIT

function getOrder()
{
   arr  = ["1 chicken","2 orange","3 milk"]
   for(i = 0;i<3;i++)
   {
     $("#elementId").append('<p>'+arr[i]+'</p><br>')
   }
}

//blank <div> tag in your page body somewhere     
<div id="elementId">

</div>
<button onclick="getOrder()">Get Order Details</button>

Upvotes: 1

Related Questions