Hi, I am fairly new to JavaScript and am looking for some help with a practice website. The website advertises food and when the user clicks the next button, the image of the food, and price change. This is what I have so far, I have an idea on how to go about doing this. Maybe make a loop and every time the button next is pressed increase the array by 1? Any help would be wonderful, thanks.
<html>
<body>
<h1> Amy's Bakery</h1>
<h2>Prices at: <span id='price'>$14.99</span</h2>
<img id = 'picture' src='images/chocolatecake.jpg' alt='' />
<a href='#' id= 'PrevBtn'>Previous</a>
<a href='#' id= 'NextBtn'>Next</a>
<div class='desc'>
Freshly backed Chocolate Cake
</div>
<script type='text/javascript'>
var dessertArray = Array(
{
imgSrc : 'images/chocolatecake.jpg',
desc : 'Freshly backed chocolate cake.',
price : 'price : $14.99'
},
{
imgSrc : 'images/chocolatemuffin.jpg',
desc : 'Delicious chocolate muffin',
price : 'price : $2.99'
},
{
imgSrc : 'images/icecream.jpg',
desc : 'Delicious ice cream available in multiple flavours.',
price : 'price : $4.99'
},
{
imgSrc : 'images/cheesecake.jpg',
desc : 'Delicious apple cheesecake',
price : 'price : $149,999.00'
}
);
</body>
</html>