Update stock object

by stofke

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#" class="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>
<div class="box">
    <h2>Stock</h2>
    <select id="myStock" size="5" width="50px">
        <option></option>
    </select>
</div>
<div class="box">
    <h2>Cart</h2>
    <select id="myCart" size="5" width="50px">
        <option></option>
    </select>
</div>
<br class="clear"/>
<h2>The effect on the items object (unaffected)</h2>
<span id="items"></span>
<h2>The effect on the stock object</h2>
<span id="stock"></span>
<h2>The effect on the cart object</h2>
<span id="cart"></span>

CSS

a {
    font: bold 100% "Lucida Grande", Lucida, Verdana, sans-serif;
}
#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 5px;
    
}

#navlist li a.current
{
    font-weight: bold;
}
h2
{
    text-decoration: underline;
    color: #555;
    font: bold 120% "Lucida Grande", Lucida, Verdana, sans-serif;
    margin-top:30px;
    margin-bottom:15px;
}
.box {
    float:left;
    margin-left:5px;
}
.clear {
    clear:both;
}

JavaScript

$(function() {
    var stockItems ={"Item one":2,"Item two":5,"Item three":9,"Item four":13,"Item five":14};//stock object
    var cartItems ={"Item one":0,"Item two":0,"Item three":0,"Item four":0,"Item five":0};//cart object
    var originalItems ={"Item one":2,"Item two":5,"Item three":9,"Item four":13,"Item five":14};//items object

    $("#navlist li a").click(function() {
        $("#myStock option").remove(); //reset the stock dropdownlist on click
        $("#myCart option").remove(); //reset the cart dropdownlist on click
        var itemName; //name of the item
        var total_stockItems = stockItems[$(this).text()]; //get total stockitems for an item
        var total_cartItems = cartItems[$(this).text()]; //get total cartitems for an item
        if (total_cartItems < originalItems[$(this).text()]) {//total amount of cartitems for an item has to be lower than the initial amount for that item, you can't buy more than there is.
            cartItems[$(this).text()] += 1; //counter, updates the cart-object +1
        }
        if (total_stockItems > 0) {//total amount of stockitems for an item has to be higher than 0 to be able to add it to the cart
            stockItems[$(this).text()] -= 1; //counter, updates the stock-object -1
        }

        for (itemName in (stockItems)) {
            if (stockItems.hasOwnProperty(itemName)) {
                $("#myStock").append($("<option></option>").val(stockItems[itemName]).html(itemName + ": " + stockItems[itemName] + " piece(s) in stock")); //build the stock dropdown
            }
        }
        for (itemName in (cartItems)) {
            if (cartItems.hasOwnProperty(itemName)) {
                $("#myCart").append($("<option></option>").val(cartItems[itemName]).html(itemName + ": " + cartItems[itemName] + " piece(s) in cart")); //build the cart dropdown
            }
        }
        //some info on the objects
        $("#items").text("var items =" + JSON.stringify(originalItems) + ";"); //output...