html - javascript - Order a list item up or down -

a simple example of tryin below. link/button on left move item up, link/button on right move item down. not working, , getting error:

object doesnt support property or method

at line:

items[counter-1] = curr;// move previous item, current

example image

here code:

javascript:

<script type="text/javascript">  function moveitem(id, direction) {     var ul = document.getelementbyid('groupby');     var items = ul.getelementsbytagname('li');      var counter = 0;     var previousitem = null;     var movenextitemup = false;      (var item in items) {          //if current item, 1 moved         if (item == id) {             if (direction == 1) { // item move down                 movenextitemup = true;             } else if ((direction == -1) || (movenextitemup == true)) { // item move                 var curr = items[counter];                 var prev = items[counter-1];                  items[counter-1] = curr;// move previous item, current                 items[counter] = prev;//move current item, previous                  break;             }                    }           previousitem = item;         counter = counter + 1;     }  }  </script> 

html:

<ul id="groupby">             <li id="one">                 one<a href="#" onclick="moveitem('one', 1)"> v </a>             </li>             <li id="two">                 <a href="#" onclick="moveitem('two', -1)"> ^ </a>two<a href="#" onclick="moveitem('two', 1)"> v </a>             </li>             <li id="three">                 <a href="#" onclick="moveitem('three', -1)"> ^ </a>three<a href="#" onclick="moveitem('three', 1)"> v </a>             </li>             <li id="four">                 <a href="#" onclick="moveitem('four', -1)"> ^ </a>four             </li>         </ul> 

you're using for-in statement, means don't have guarantee of numeric order may expect.

use for statement instead:

for (var = 0, len = items.length; < len; i++) { 

also, keep in mind items "live list", changes make in dom reflected in list, , list immutable since isn't array.

if want shift element 1 index, use insertbefore.

something this:

items[i].parentnode.insertbefore( items[i],items[i-1] ); 

example: http://jsfiddle.net/d25a3/

function moveitem(id, direction) {     var ul = document.getelementbyid('groupby');     var items = ul.getelementsbytagname('li');      var counter = 0;     var previousitem = null;     var movenextitemup = false;      (var = 0, len = items.length; < len; i++) {         var item = items[i];          if (item.id == id) {             if (direction == 1) {                  movenextitemup = true;             } else if ((direction == -1) || (movenextitemup == true)) {                  item.parentnode.insertbefore( item,items[i-1] );                 break;             }         }         previousitem = item;         counter = counter + 1;     } } 

also, not sure full intent of code is, seem simplify this:

example: http://jsfiddle.net/d25a3/1/

   <!-- pass parent node of item clicked first argument -->  <li id="two">     <a href="#" onclick="moveitem(this.parentnode, -1)"> ^ </a>two<a href="#" onclick="moveitem('two', 1)"> v </a> </li> 

and rid of loop entirely:

function moveitem(item, direction) {      var counter = 0;     var previousitem = null;     var movenextitemup = false;      if (direction == 1) {         movenextitemup = true;     } else if ((direction == -1) || (movenextitemup == true)) {             // previous <li> element         var prev = item.previoussibling         while( prev && prev.nodetype != 1 && (prev = prev.previoussibling));          item.parentnode.insertbefore(item, prev);     }     previousitem = item;     counter = counter + 1; }