Javascript - funkcja działa po drugim wywołaniu

Witam,
Stworzyłem funkcję, która wywołuje się po kliknięciu na pewien obrazek (w HTML użyłem oczywiście funkcje onclick), jednak dzieje się to dopiero po drugim kliknięciu myszą. Nie mam pojęcia czym to jest spowodowane... tzn w sumie wiem... pętla for jakoś blokuje ten kod, ale nie potrafię sobie z tym poradzić. Gdy wpiszemy przed funkcją byle jakie polecenie, np głupie "alert('helo')", napis pokazuje się po pierwszym kliknięciu, natomiast reszta funkcji dopiero po drugim... Zna ktoś rozwiązanie?

 function poczatek() {
                //okreslam szerokosc id=lista

                //usuwam niepotrzebne dzieci, zeby okreslic ilosc LI
                var lista = document.getElementById('lista');
                var iledzieci = lista.childNodes.length;
                
                for (i = 0; i < iledzieci; i++) {
                    if (lista.childNodes[i].nodeName != 'LI') lista.childNodes[i].parentNode.removeChild(lista.childNodes[i]);
                }
                //ustawiam szerokosc listy
                lista.style.width = 900 * iledzieci + 'px';

                //rozpoczynem przejscie
                next();
            }

Użyj debugera, albo chociaż podejrzyj komunikaty z konsoli przeglądarki (F12/Shift+F5/...).

BTW jeśli usuniesz pierwszy element, to lista nie ma już iledzieci elementów, tylko o jeden mniej, więc pętla musi wybuchnąć. Z tego powodu usuwanie w pętli for robi się w dół, a nie w górę (for (var i = iledzieci-1; i >= 0; --i)).
Zjadłeś var przed zmienną i.
lista.childNodes[i].parentNode.removeChild(lista.childNodes[i]); - każde dziecko ma tego samego rodzica, więc po co dla każdego pobierasz go od nowa, tym bardziej, że rodzic kryje się w już istniejącej zmiennej lista?

Dzięki... zmieniłem tą pętle i wszystko działa jak powinno.