Question

I have a problem with the following JavaScript function. I have two UL and I need that when the user clicks on a LI, this element transfers to the other UL.

I’ve managed to move them onClick from on list to the other, the problem appears when I try to move again a LI that was previously in the other UL, when that happens it just doesn’t work…

    function testList() {
    usersA = document.getElementById("users-a");
    usersB = document.getElementById("users-b");
    
    for (var i=0; i < usersA.getElementsByTagName("li").length; i++) {
        usersA.getElementsByTagName("li")[i].onclick = function() {
            transfer = this.cloneNode(true);
            usersB.appendChild(transfer);
            usersA.removeChild(this);
            return false;
        }

    }
    for (var i=0; i < usersB.getElementsByTagName("li").length; i++) {          
        usersB.getElementsByTagName("li")[i].onclick = function() {
            transfer = this.cloneNode(true);
            usersA.appendChild(transfer);
            usersB.removeChild(this);
            return false;
        }

    }
    
}

I know that my logic sucks but it’s all I could come up with. Any ideas why it works the first time I transfer a LI but when I try to move back to its original UL it doesn’t work?

Answer 1

The problem is that even after you’ve moved an element from list A to list B, it still keeps its old onclick handler, which still says “remove me from list A and add me to list B”. You need to change its onclick handler to say “remove me from list B and add me to list A”. Here’s one way to fix that:

var usersA = document.getElementById("users-a");
var usersB = document.getElementById("users-b");

var onclickA;
var onclickB = function() {
        usersA.appendChild(this);
        this.onclick = onclickA;
        return false;
    };
onclickA = function() {
        usersB.appendChild(this);
        this.onclick = onclickB;
        return false;
    };

for (var i=0; i < usersA.getElementsByTagName("li").length; i++)
    usersA.getElementsByTagName("li")[i].onclick = onclickA;
for (var i=0; i < usersB.getElementsByTagName("li").length; i++)      
    usersB.getElementsByTagName("li")[i].onclick = onclickB;

(I also got rid of the cloneNode stuff, for exactly the reasons that nnnnnn gives.)