javascript - Cannot read property 'undefined' of undefined?how can i push the numbers to first drop down list ? using java script? -

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 = 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; < option.length; i++)   {  var opt = option[i];  var = document.createelement("option");  a.innerhtml = opt;  a.value = opt;  select.appendchild(a);  }  for(i = 0; < option2.length; i++)   {  var opt2 = option2[i];  var = document.createelement("option");  a.innerhtml = opt2;  a.value = opt2;  select2.appendchild(a);  }

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

var select = document.getelementbyid("selectnumber");  var option = ["1", "2", "3", "4", "5","6","7","8","9"];  for(i = 0; < option.length; i++)   {      var opt = option[i];      var el = document.createelement("option");      el.textcontent = opt;      el.value = opt;      select.appendchild(el);  }  var select = document.getelementbyid("status");   var options = [ ];   select.innerhtml = "";  options.push (selectnumber);  for(i = 0; < options.length; i++)   {      var opt = options[i];      select.innerhtml += "<option value=\"" + opt + "\">" + opt + "</option>";  }

<select id="selectnumber" multiple size = "10">      <option>choose number</option>  </select>  <select id = "status" multiple size = "10"></select>

i want push , remove elements first drop down second , vice versa ??? getting error "cannot read property 'undefined' of undefined". meaning of error? can me?

you can append option of clicked select other one. see below:

if (event.currenttarget !== event.target) 

is checked because don't want move select itself. might want check if clicked option not choose number that's you.

var select = document.getelementbyid("selectnumber");  var option = ["1", "2", "3", "4", "5","6","7","8","9"];  for(i = 0; < option.length; i++)   {      var opt = option[i];      var el = document.createelement("option");      el.textcontent = opt;      el.value = opt;      select.appendchild(el);  }  var select2 = document.getelementbyid("status");     function move_1(event)  {    if (event.currenttarget !== event.target)    {      select2.appendchild(event.target);    }  }    function move_2(event)  {    if (event.currenttarget !== event.target)    {      select.appendchild(event.target);    }  }

<select id="selectnumber" multiple size = "10" onclick="move_1(event)">      <option>choose number</option>  </select>  <select id = "status" multiple size = "10" onclick="move_2(event)">      <option>choose number</option>  </select>

if want use push/slice without appendchild

var select = document.getelementbyid("selectnumber");  var option = ["1", "2", "3", "4", "5","6","7","8","9"];  var option2 = [];  for(i = 0; < option.length; i++)   {      var opt = option[i];      var el = document.createelement("option");      el.textcontent = opt;      el.value = opt;      select.appendchild(el);  }  var select2 = document.getelementbyid("status");   var first_option = "<option>choose number</option>";    function reconstruct()  {    select.innerhtml = select2.innerhtml = first_option;        (var item of option)    {      select.innerhtml += "<option value='"+item+"'>"+item+"</option>";    }      (var item of option2)    {      select2.innerhtml += "<option value='"+item+"'>"+item+"</option>";    }  }    function move(event, direction)  {    if (event.currenttarget === event.target)    {      return;    }    else if (direction == "right")    {      var index = option.indexof(event.target.value);      option2.push(event.target.value);      option.splice(index,1);      console.log(index);    }    else if (event.currenttarget !== event.target && direction == "left")    {      var index = option2.indexof(event.target.value);      option.push(event.target.value);      option2.splice(index,1);      console.log(index);      }    reconstruct();  }

<select id="selectnumber" multiple size = "10" onclick="move(event, 'right')">      <option>choose number</option>  </select>  <select id = "status" multiple size = "10" onclick="move(event, 'left')">      <option>choose number</option>  </select>