Inventory

by techsin

HTML

<div id="inventory">
    <h4>Inventory</h4>
    <div class="container">
        <h5 id="inventory_stone">stone: <span id="stoneQuantity">0</span></h5>
        <h5 id="inventory_coal">coal: <span id="coalQuantity">0</span></h5>
        <h5 id="inventory_copper">copper: <span id="copperQuantity">0</span></h5>
    </div>
</div>

CSS

.hide {display: none;}

JavaScript

var data = {
    stone:{ n:12, ele: getEle('inventory_stone'), domN: getEle('stoneQuantity') },
    coal:{ n:145, ele: getEle('inventory_coal'), domN: getEle('coalQuantity') },
    copper:{ n:0, ele: getEle('inventory_copper'), domN: getEle('copperQuantity') }
};

update();

function update() {
    for (var k in data) {
        data[k].ele.className = "";
        if (data[k].n<=0) {
            data[k].ele.className = "hide";
        }  else {
             data[k].domN.textContent = data[k].n;
        }
    }
}



function getEle(x) {
    return document.getElementById(x);
}