Prasad_Joshi Prasad_Joshi - 21 days ago 5
CSS Question

How to hide/show drop down in javascript on click of button

I am trying to show a drop down to user but only when the user click on a button, I tried it several ways but no luck, I have put both buttons and select-box for now in same div but it still not working. as when user clicks on "Add Stock " button it should open up the drop down.

<head><h1>CRS</h1></head>
<button id = 'newEntry' onclick="newBill()">Create New Bill</button>
<button id= 'clearEntry'> Reset </button>
<button id= 'dailyReport' > Report </button>
<div>
<button id= 'AdditemToStock' onclick="askCategory()">Add Stock</button>
<select style="visibility:hidden;" id="showInDropDown">
<option disabled="disabled" selected="selected">Choose Category</option>
</select>
</div>
<div id="NewBillMsg"> </div>
<div id="addToCartMsg"> </div>

<div id="itemList" style="display:none">

<h3>Select items</h3>
<select name="items" id="itemIndex" onclick="selectedItem()">
<option selected="selected">Select Items</option>
<option value="chocolate">chocolate</option>
<option value="Eggs">Eggs</option>
<option value="Bread">Bread</option>
<option value="Milk">Milk</option>
</select>
</div>

<script>
function cashRegister() {
total= 0;
addBill:function () {
this.total+=itemCost;
document.getElementById('NewBillMsg').innerHTML = "New";
document.getElementById('itemList').style.display="block";
},

scan: function(item,quantity) {
switch (item) {
case "Eggs": this.add(0.98 * quantity); break;
case "Milk": this.add(1.23 * quantity); break;
case "Bread": this.add(4.99 * quantity); break;
case "chocolate": this.add(0.45 * quantity); break;
}
return true;
//addToCart: function () {
//document.getElementById('addToCartMsg').innerHTML = "Enter Quantity ";
//},
askCategory: function () {
button.onclick = function() {
document.getElementById('showInDropDown').style.display="block";
},
};
</script>

Answer

Lots of syntax errors here. Fixed most of them. The following code should work:

<button id='newEntry' onclick="newBill()">
Create New Bill</button>
<button id='clearEntry'> Reset </button>
<button id='dailyReport'> Report </button>
<div>
    <button id='AdditemToStock' onclick="askCategory()">Add Stock</button>
    <select style='display:none;' id="showInDropDown">
        <option disabled="disabled" selected="selected">Choose Category</option>
    </select>
</div>
<div id="NewBillMsg"> </div>
<div id="addToCartMsg"> </div>
<div id="itemList" style="display:none">
    <h3>Select items</h3>
    <select name="items" id="itemIndex" onclick="selectedItem()">
        <option selected="selected">Select Items</option>
        <option value="chocolate">chocolate</option>
        <option value="Eggs">Eggs</option>
        <option value="Bread">Bread</option>
        <option value="Milk">Milk</option>
    </select>
</div>
<script>
function cashRegister() {
    var total = 0,
        addBill = function() {
            this.total += itemCost;
            document.getElementById('NewBillMsg').innerHTML = "New";
            document.getElementById('itemList').style.display = "block";
        },

        scan = function(item, quantity) {
            switch (item) {
                case "Eggs":
                    this.add(0.98 * quantity);
                    break;
                case "Milk":
                    this.add(1.23 * quantity);
                    break;
                case "Bread":
                    this.add(4.99 * quantity);
                    break;
                case "chocolate":
                    this.add(0.45 * quantity);
                    break;
            }
        };
}

var askCategory = function() {
    document.getElementById('showInDropDown').style.display = "block";
};
</script>