Why whole array elements are added in the SelectBox instead of only new one

Question

yesterday i succeeded in adding the new element in array but now i am stuck as when i try to show those elements in drop down box,every time a new element in added in array, it adds entire array in to the list again, instead of only the new element added in array by user.

here is my code snippet.

 var fruits = ["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); document.getElementById("showList").innerHTML = fruits; clearAndShow(); } var sel = document.getElementById("showInDropDown"); for (var i = 0; i < fruits.length; i++) { var opt = document.createElement('option'); opt.innerHTML = fruits[i]; fruits opt.value = fruits[i]; sel.appendChild(opt); } } function clearAndShow() { newItem.value = ""; } 

 <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> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select> 

Answer 1

You need to clear the dropdowm values

 var fruits = ["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); 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]; fruits opt.value = fruits[i]; sel.appendChild(opt); } } function clearAndShow() { newItem.value = ""; } 

 <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"></input> <br></br> <p id="errorMsg"></p> <button onclick="addToStock()">Add</button> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select> 

Answer 2

Its because you are adding all the elements again to the select.

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

Just add the current element to the select.

 var fruits = ["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); document.getElementById("showList").innerHTML = fruits; var sel = document.getElementById("showInDropDown"); //for (var i = 0; i < fruits.length; i++) { var opt = document.createElement('option'); opt.text = newItem.value; opt.value = newItem.value; sel.appendChild(opt); //} clearAndShow(); } } function clearAndShow() { newItem.value = ""; } 

 <label>Enter an New item to add in Stock</label> <br> </br> <input type="text" name=" itemName" id="addItemInStock"></input> <br></br> <p id="errorMsg"></p> <button onclick="addToStock()">Add</button> <!-- <label>Remove Item from Stock</label><br> </br> <input type="text" name=" itemName" id="RemoveToStock"> </input><br></br> <button onclick="removeFromStock()">Remove</button>--> <p id="showList"></p> <select id="showInDropDown"></select>