Prasad_Joshi Prasad_Joshi - 17 days ago 6
Javascript Question

Array Elements does not get displayed in the select box in javascript

I am adding new elements in array and trying to set all those elements dynamically to a select box in java script, but on every refresh of the browser select box does get empty again.but the list shown outside the box does not change on browser refresh.

<html>
<label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"><br></br>
<p id="errorMsg"></p>
<button onclick="addToStock()">Add</button>
<p id="showList"></p>
<select id="showInDropDown">
<option disabled selected style="display: block;">Stock Items</option>
</select>
<script>
var fruitsfromLS = localStorage.getItem("fruits");
var fruits = fruitsfromLS ? JSON.parse(fruitsfromLS) : ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("showList").innerHTML = fruits;
var newItem = document.getElementById("addItemInStock");

function addToStock() {
if ((newItem.value) === "") {
document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
document.getElementById("errorMsg").style.display = "block";
} else {
document.getElementById("errorMsg").style.display = "none";
fruits.push(newItem.value);
//this is added extra
// localStorage.setItem("fruits", JSON.stringify(fruits));
var StoredFruits = localStorage.setItem("fruits", JSON.stringify(fruits));

document.getElementById("showList").innerHTML = fruits;
clearAndShow();
}

var sel = document.getElementById("showInDropDown");
document.getElementById("showInDropDown").innerHTML = "";
for (var i = 0; i < fruits.length; i++) {
var opt = document.createElement('option');


opt.innerHTML = fruits[i];
opt.value = fruits[i];
sel.appendChild(opt);
}
}

function clearAndShow() {
newItem.value = "";
}
</script>

</html>

Answer

Because you're only adding the select items in addToStock, and it's only called when the button is clicked. Try this

<html>
    <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"><br></br>
    <p id="errorMsg"></p>
    <button onclick="addToStock()">Add</button>
    <p id="showList"></p>
    <select id="showInDropDown">
        <option  disabled selected style="display: block;">Stock Items</option>
    </select>
    <script>
        var fruitsfromLS = localStorage.getItem("fruits");
        var fruits = fruitsfromLS ? JSON.parse(fruitsfromLS) : ["Banana", "Orange", "Apple", "Mango"];
        document.getElementById("showList").innerHTML = fruits;
        var newItem = document.getElementById("addItemInStock");

        function addToStock() {
            if ((newItem.value) === "") {
                document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
                document.getElementById("errorMsg").style.display = "block";
            } else {
                document.getElementById("errorMsg").style.display = "none";
                fruits.push(newItem.value);
                //this is added extra
                //  localStorage.setItem("fruits", JSON.stringify(fruits));
                var StoredFruits = localStorage.setItem("fruits", JSON.stringify(fruits));

                document.getElementById("showList").innerHTML = fruits;
                clearAndShow();
            }
            fillSelect();

        }

        function fillSelect(){
            var sel = document.getElementById("showInDropDown");
            document.getElementById("showInDropDown").innerHTML = "";
            for (var i = 0; i < fruits.length; i++) {
                var opt = document.createElement('option');                     
                opt.innerHTML = fruits[i];
                opt.value = fruits[i];
                sel.appendChild(opt);
            }
        }

        function clearAndShow() {
            newItem.value = "";
        }

        window.onload = function(){
            fillSelect();
        };

    </script>
</html>

I moved the select-filling code out to its own function, and call it when the page loads using window.onload

Comments