Cannot read property 'undefined' of undefined? why this error is coming?

Question

 var select = document.getElementById("source"); var select2= document.getElementById("status"); var option = ["1", "2", "3", "4", "5","6","7","8","9"]; var option2= []; function moveright() { var a = source.options[source.selectedIndex].value; var option = document.createElement("option"); option.text = a; select2.add(option); select.remove(i); } function moveleft() { var b = status.option2[status.selectedIndex].value; var option2 = document.createElement("option"); option2.text = b; select.add(option2); select2.remove(i); } for(i = 0; i < option.length; i++) { var opt = option[i]; var a = document.createElement("option"); a.innerHTML = opt; a.value = opt; select.appendChild(a); } for(i = 0; i < option2.length; i++) { var opt2 = option2[i]; var a = document.createElement("option"); a.innerHTML = opt2; a.value = opt2; select2.appendChild(a); } 

 <select id = "source" multiple size = "10" onclick = "moveright ()"> <option>Choose a number</option> </select> <select id = "status" multiple size = "10" onclick = "moveleft ()"> <option>Choose a number </option> </select> 

I am new to JavaScript I am trying to push the drop down values from one drop down to another. First drop down is working, but second drop down is not working. Can anyone help me? I tried only in the JavaScript array.

Answer 1

Slightly changed, but giving you expected results ;) Working fiddle

In your moveright and moveright you had a variable i which was not defined. I assume you wanted to use selected option index to remove itself.

And you should write full selector for getting elements, not using it's id directly. Browser picked up source id and returned as html element, however it could not do that with status , because there is such property as window.status .