Prevent overwrite running function

Question

So I have this Clock that running after the getDate function, and it work pretty smooth. I can start run the wrapp of the clock and when clicking on the wrap, it starts move with an eventhandler. the problem is that i would be able to run the clock multiply time without the previous stop work. I know that the functions are overwriting each other, and i have been trying to move arround the function, but i havent been able to start multiply clocks.

I have the Clock() function that's wrap the other functions. I have a createWrapp(), that dynamicly created the classes of the function, then I have the eventlistner that start the clock when clicking on the wrap.

The three is something like this.

function clock(){
    function createWrapp(){
        createElementsWithClass;
    } 
    createWrapp();
    function Wrapp(){
        eventlistner connected to "clock-window-wrapper"
    }
    function myFunction(){ 
        startClock();
    }
}

This is my jsFiddle.

http://jsfiddle.net/dymond/nufwb/1/

Thanks

Please post your actual code here.

Bergi
– Bergi

2013-02-13 00:06:28 +00:00
Commented Feb 13, 2013 at 0:06 — Bergi
– Bergi, Commented Feb 13, 2013 at 0:06

Bergi · Accepted Answer · 2013-02-13 00:13:07Z

The problem is that ~~nearly~~ all your variables in createWrapp are implicit global. Consecutive calls to clock() will overwrite them, and only the last created clock does tick. Use var statements!

Change it to:

function clock() {

    var outerDiv = createElementWithClass('div', 'clock-window-wrapper'),
        innerDiv = createElementWithClass('div', 'clock-menubar-wrapper');
    outerDiv.appendChild(innerDiv);
    document.getElementById("page-content-wrapper").appendChild(outerDiv);

    var clock_windows_wrapper_close = createElementWithClass('div', 'close');
    innerDiv.appendChild(clock_windows_wrapper_close);

    var clock_toolbar_wrapper_close = createElementWithClass('div', 'clock-content-wrapper');
    outerDiv.appendChild(clock_toolbar_wrapper_close);

    var hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
    clock_toolbar_wrapper_close.appendChild(hours);
    clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this ##WTF

    var minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
    clock_toolbar_wrapper_close.appendChild(minutes);
    clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this ##
    var seconds = createElementWithClass('ul', 'clock-digit-wrapper second');
    clock_toolbar_wrapper_close.appendChild(seconds);

    var hour1 = createElementWithClass('li', "clock-digit-four");
    var hour2 = createElementWithClass('li', "clock-digit-one");
    hours.appendChild(hour1);
    hours.appendChild(hour2);

    var minute1 = createElementWithClass('li', "clock-digit-three");
    var minute2 = createElementWithClass('li', "clock-digit-three");
    minutes.appendChild(minute1);
    minutes.appendChild(minute2);

    var sec1 = createElementWithClass('li', "clock-digit-three");
    var sec2 = createElementWithClass('li', "clock-digit-seven");
    seconds.appendChild(sec1);
    seconds.appendChild(sec2);

createWrapp as a separate function is actually not necessary, since it's only called once and no variables are local to it.

Oh, I get it, I did know that i was something with the local and global variables, but didn't know that i was because I didn't use the var statements. Thanks allot.

Collectives™ on Stack Overflow

Prevent overwrite running function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related