JS - var merken/übergeben

cottton · 17. Februar 2013

JS macht mich fertig. Hab doch da nen countdown balken. Der zählt schön runter bis die Seite refresht.
User kann das aber stoppen wenn er auf den Balken clickt.
Alles i.O.

Aber ich bekomm die var (sec) aus dem DIV nicht "raus".
Möchte im Grunde bei nochmaligem click den countdown fortfahren.
Dachte dabei an ein einfaches :

JavaScript

funcName(this.innerHTML)

Aber da der DIV container on default leer ist bekomme ich nix. Die sec werden von der anderen function per innerHTML reingeschrieben.

Functions:

JavaScript

/*author Philip M. 2010*/  /*http://www.codingforums.com/showthread.php?t=201784*/
    var timeInSecs;
    var ticker;
    function startTimer(secs){
        timeInSecs = parseInt(secs)-1;
        ticker = setInterval("tick()",1000);   // every second
    }
    function tick(){
        var secs = timeInSecs;
        if (secs>0){
            timeInSecs--;
        }
        else{
            clearInterval(ticker); // stop counting at zero
        }
        document.getElementById("countdown").innerHTML = secs +" sec";
        document.getElementById("countdown_bar").style.width = secs+"%";




        if(secs <= (15 / 3) ){
            document.getElementById("countdown_bar").style.background = "#130808";
        }
        if(secs <= 0){
            pageReload();
        }
    }
    startTimer(15); // 60 seconds




    function stop_refresh(){
        if(ticker){
            clearInterval(ticker); // stop counting
            document.getElementById("countdown").innerHTML = "stopped";
        }
    }

Alles anzeigen

der container:

HTML

<div onclick="stop_refresh();" title="Hold on!" class="countdown_bar" id="countdown_bar" style="cursor:pointer;width:15%;"></div>

Ich brauche also die verbleibenden "secs" von tick() in der function stop_refresh()
(stop_refresh() würde dann umbenannt in toggleIrgentwas() =) )

The Scout · 17. Februar 2013

Ja dann nimm doch einfach secs

Wenn du gestoppt hast, bleibt doch auch die Variable secs unverändert, oder seh ich das grad falsch? Das heißt, du kannst sie in stop_refresh() einfach weiter verwenden, nicht wahr?

Idee:

JavaScript

function toggle_refresh(){
    if(ticker){
        clearInterval(ticker); // stop counting
        document.getElementById("countdown").innerHTML = "stopped";
    }




    if(document.getElementById("countdown").innerHTML == "stopped"){
        startTimer(secs);
    }
}

Alles anzeigen

Probiers doch mal aus. Schließlich ist secs in diesem Abschnitt ja bereits eine bestimmte Zahl, die dann als Startpunkt übergeben wird, oder?

Basi · 17. Februar 2013

Dir ist aber auch aufgefallen das dein Countdown gar nicht anhält?

cottton · 17. Februar 2013

sollte eine schleife ergeben.
Kann aber nicht, da "secs" nicht vorhanden.
Das ist das, was ich meine - ich brauch die var secs in der function
Nur wie?

Zitat

Uncaught exception: ReferenceError: Undefined variable: secs
Error thrown at line 132, column 2 in stop_refresh() in http://localhost/istats2/index.php?action=scheck&ip=208.100.45.129&port=47200&sub=Submit&aref=1&foc=1&chk=1&s_on=1&vol=25&notifnum=0:
startTimer(secs);
called from line 1, column 0 in <anonymous function>(event) in http://localhost/istats2/index.php?action=scheck&ip=208.100.45.129&port=47200&sub=Submit&aref=1&foc=1&chk=1&s_on=1&vol=25&notifnum=0:
stop_refresh();

Alles anzeigen

Basi · 18. Februar 2013

Vielleicht solltest du einfach mal deinen kompletten Code posten, da kann dir sicher besser geholfen werden.

cottton · 18. Februar 2013

Den ganzen code posten wird komisch.
Habs daher mal hier hin geposted: http://jsfiddle.net/KmKF9/
sieht bissl kaput aus weil alle img fehlen usw. die funktion an sich läuft aber.

die function sieht jetzt so aus:

JavaScript

function toggleRefresh(){
        // id countdown_bar = <div> container for the bar
        // id countdown     = <span> where the secs show up
        if(!contin){
            var contin = document.getElementById("countdown_bar").style.width;
            if(ticker){
                clearInterval(ticker); // stop counting
                document.getElementById("countdown").innerHTML = "stopped";
                document.getElementById("countdown_bar").title = "Go on!";
                document.getElementById("countdown_bar").innerHTML = "continue";
            }
        }else{
            if(document.getElementById("countdown").innerHTML == "stopped"){
                document.getElementById("countdown_bar").innerHTML = "";
                startTimer(contin);
            }
        }
    }

Alles anzeigen

Das wieder starten funktioniert aber nicht =/

Basi · 18. Februar 2013

Wenn du secs global definierst kannst du die Variable auch übergreifend über Funktionen verwenden, siehe Zeile 4, 31, 38 und 46:

JavaScript

/*author Philip M. 2010*/  /*http://www.codingforums.com/showthread.php?t=201784*/
    var timeInSecs;
    var ticker;
    var secs;    
    function startTimer(secs){




        timeInSecs = parseInt(secs)-1;
        ticker = setInterval("tick()",1000);   // every second
    }
    function tick(){
        secs = timeInSecs;
        if(secs>0){
            timeInSecs--;
        }
        else{
            clearInterval(ticker); // stop counting at zero
            // startTimer(60); // remove forward slashes in front of startTimer to repeat if required
        }
        document.getElementById("countdown").innerHTML = secs +" sec";
        document.getElementById("countdown_bar").style.width = secs+"%";




        if(secs <= (15 / 3) ){
            document.getElementById("countdown_bar").style.background = "#130808";
        }
        if(secs <= 0){
            pageReload();
        }
    }
    startTimer(15); // 60 seconds




     var contin = false;   

    function toggleRefresh(){
        // id countdown_bar = <div> container for the bar
        // id countdown     = <span> where the secs show up
        if(!contin){
            if(ticker){
                contin = true;
                clearInterval(ticker); // stop counting
                document.getElementById("countdown").innerHTML = "stopped";
                document.getElementById("countdown_bar").title = "Go on!";
                document.getElementById("countdown_bar").innerHTML = "continue";
            }
        }else{
            if(document.getElementById("countdown").innerHTML == "stopped"){
                contin = false;
                document.getElementById("countdown_bar").innerHTML = "";
                startTimer(secs);
            }
        }
    }

Alles anzeigen

Im Übrigen hast du für contin die Weite des Ladebalkens ausgelesen (style.width), welche nicht die Zahl sondern auch noch das % Zeichen zurückgegeben hat (14% z.B.), das funktioniert so natürlich nicht.

cottton · 18. Februar 2013

Hey das funktioniert ja
Danke!

Also ist alles, was ich in JS außerhalb definiere global?
Verwirrend. Warum muss das in jeder Sprache anders sein

Basi · 18. Februar 2013

Das ist in jeder Objektorientierten Sprache so und nennt sich namespace, gibt es auch bei PHP, siehe OOP.

JS - var merken/übergeben

Jetzt mitmachen!

Teilen