FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
michal Čepelák
Člen
Avatar
michal Čepelák:2.1.2019 20:24

Zdravím,
mám formulář

<form>
<input type="text" id="outpust" name="pocetHodin" onclick="stastPause()" />
</form>

a kód v javascriptu

 <script>
    var time = 0;
var running = 0;
function startPause(){
    if(running == 0){
        running = 1;
        increment();
  document.getElementById("start").innerHTML = "Pause";

    document.getElementById("startPause").style.backgroundColor = "red";

    document.getElementById("startPause").style.borderColor = "red";

    }
    else{
        running = 0;
    document.getElementById("start").innerHTML = "Resume";
    document.getElementById("startPause").style.backgroundColor = "green";
    document.getElementById("startPause").style.borderColor = "green";
    }
}
function reset(){
    running = 0;
    time = 0;
    document.getElementById("start").innerHTML = "Start";
 //   document.getElementById("output").innerHTML = "0:00:00:00";
    document.getElementById("output").value = "00:00:00:00";
    document.getElementById("startPause").style.backgroundColor = "green";
    document.getElementById("startPause").style.borderColor = "green";
}
function increment(){
    if(running == 1){
        setTimeout(function(){
            time++;
            var mins = Math.floor(time/10/60);
            var secs = Math.floor(time/10 % 60);
            var hours = Math.floor(time/10/60/60);
            var tenths = time % 10;
            if(mins < 10){
                mins = "0" + mins;
            }
            if(secs < 10){
                secs = "0" + secs;
            }
    //        document.getElementById("output").innerHTML = hours + ":" + mins + ":" + secs + ":" + tenths + "0";
      //      document.getElementById("output").innerHTML = hours + ":" + mins ;
            document.getElementById("output").value = hours + ":" + mins + ":" + secs ;
            increment();
        },100)
    }
}
</script>

Při kliknutí v textovém řádku by se měl začít počitat čas ale pokud to mám takle tak to nefunguje. pokud to dám mimo <form> tak mi to funguje, nevím kde mám chybu.

Poradíte někdo. Děkuji Michal Č.

Zkusil jsem: Zkoušel jsem hledat na internetu ale zatím marně nevím co stím.

Chci docílit: Čeho chci dosáhnout jsem psal v nahoře. Děkuji za rady

 
Odpovědět
2.1.2019 20:24
Avatar
Šimon Raichl
Tvůrce
Avatar
Odpovídá na michal Čepelák
Šimon Raichl:2.1.2019 22:50

Ahoj, mas tam dva preklepy - u idcka a u onclick eventu, prepis si to na:

<form>
    <input type="text" id="output" name="pocetHodin" onclick="startPause()">
</form>
 
Nahoru Odpovědět
2.1.2019 22:50
Avatar
michal Čepelák
Člen
Avatar
Odpovídá na Šimon Raichl
michal Čepelák:2.1.2019 22:56

Zdravím to už je opravené a stejne to nejde pokud je ten input vložen ve <form></form> Pokud je vložen mimo tak to funguje ok

Editováno
 
Nahoru Odpovědět
2.1.2019 22:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.1.2019 11:34

Jo, tak to ma do fungovani jeste hodne daleko. Nasel jsem tam desitky chyb, ze kterych lze usoudit, ze programu vubec nerozumis, netusis, co kdy a proc dela. Nikdy nemohl takovyto kod fungovat mimo formular. A jsi liny si vygooglovat funkcni reseni. Pripadne jsi to ani nezkousel.
Predevsim mi neni jasne, proc jsi nepouzil setInterval, ktery se spousti opakovane sam.

<form>
    <br>Status <span id="status"></span>
    <br>Output <span id="output"></span>
    <br><input type="button" id="startPause" onclick="rrr.func.startPause()" value="startPause">
</form>


 <script>
var rrr = {};

rrr.timer = null;
rrr.time = 0;
rrr.running = 0;
rrr.el = {};
rrr.el.status = document.getElementById("status");
rrr.el.button = document.getElementById("startPause");
rrr.el.output = document.getElementById("output");
rrr.func = {};

rrr.func.status = function (type){
    var el, item_all, item;
    el = rrr.el;
    item_all = {
      start  : {text: "Resume" , color:"green"},
      stop   : {text: "Paused" , color:"red"  },
      reset  : {text: "Reset"  , color:"green"},
      running: {text: "Running", color:"green"}
      }
    item = item_all[type];
    el.status.innerHTML = item.text;
    el.button.style.backgroundColor = item.color;
    el.button.style.borderColor = item.color;
}

rrr.func.output = function (str){
    var el;
    el = rrr.el;
    el.output.innerHTML = str;
}

rrr.func.startPause = function (){
    var el;
    el = rrr.el;
    if(rrr.running == 0){
        rrr.func.status('start');
        rrr.func.start();
    }
    else{
        rrr.func.stop();
        rrr.func.status('stop');
    }
}

rrr.func.reset = function (){
    var el;
    el = rrr.el;
    rrr.running = 0;
    rrr.time = 0;
    rrr.func.output("00:00:00:00");
    rrr.func.status('reset');
}

rrr.func.start = function (){
    if(rrr.running == 1 || rrr.timer!=null){
       rrr.func.stop();
    }
    rrr.running = 1;
    rrr.timer = setTimeout("rrr.func.running()", 100);
}

rrr.func.stop = function (){
    rrr.running = 0;
    if (rrr.timer!=null) clearTimeout(rrr.timer);
}

rrr.func.running = function (){
    var el, time;
    el = rrr.el;
    rrr.time++;
    time = rrr.time;
    var mins  = Math.floor(time/10/60);
    var secs  = Math.floor(time/10 % 60);
    var hours = Math.floor(time/10/60/60);
    var tenths = time % 10;
    if(mins < 10){
        mins = "0" + mins;
    }
    if(secs < 10){
        secs = "0" + secs;
    }
    rrr.func.status('running');
    rrr.func.output(hours + ":" + mins + ":" + secs);
    rrr.func.start();
}

rrr.func.reset();
rrr.func.startPause();
</script>

jo, tam by to slo napsat i takhle
rrr.timer = setTimeout(rrr­.func.running, 100);

Editováno
 
Nahoru Odpovědět
3.1.2019 11:34
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.1.2019 11:40

Je mozne, ze to, co popisujes jako kod mimo formular, takovy kod tu preci nikde neni uvedeny, je uplne jiny kod. Uplne jiny kod samozrejme fungovat muze. Ale tento v zadnem pripade. Tam je fakt tolik zasadnich chyb...

 
Nahoru Odpovědět
3.1.2019 11:40
Avatar
michal Čepelák
Člen
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3.1.2019 16:29

Děkuji,
tento kód jsem našel na internetu a trochu předělal ale chybně, děkuji za opravu, s javascriptem začinám.
jenom se chci zeptat když v tomto kódu od Vás

<br>Output <span id="output"></span>

to id="output" nejde zobrazit jinde než v <span>?
chtěl jsem to umístit do input ale tam mi to nefunguje měl jsem za to že kam vložím to id="output tam se mi zobrazí čas.
po zastavení času bych potřeboval formulář s časem odeslat do databaze přes php
Děkuji

 
Nahoru Odpovědět
3.1.2019 16:29
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.1.2019 18:29 
<span>el.innerHTML</span>
<div>el.innerHTML</div>
<form>
  <textarea>el.value</textarea>
  <input value="el.value">
</form>

Njn. Tak znova. Nefunguje ti ten kod, protoze tam mas spoustu chyb. Nevim, zda ma smysl ti kazdou z nich vysvetlovat...
Chyba 1

    document.getElementById("output").value = "00:00:00:00";
    document.getElementById("startPause").style.backgroundColor = "green";
    document.getElementById("output").value = hours + ":" + mins + ":" + secs ;
// Pokousis se zapisovat to 3 elementu, ale v html kodu mas 1.
<input type="text" id="outpust" name="pocetHodin" onclick="stastPause()" />

Chyba 2 (zminil Simon)

<input id="outpust"
.getElementById("output")

Asi preklep pri psani id.
A potom jeste asi dalsich 20.

--

Jesli mas Firefox, tak si spust ctrl+shif+k (nastroje > vyvoj webu > webova konzola). Pak nacti tu stranku a v tom okenku ti zobrazi kazdy problem, ktery mu brani v pokracovani na dalsi radek js kodu (tim asi 2/3 chyb dokazes odstranit)

Editováno
 
Nahoru Odpovědět
3.1.2019 18:29
Avatar
michal Čepelák
Člen
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3.1.2019 18:37

Já jsem to zkoušel s kódem co si poslal výše akorát jsem tam vymazal řádek

rrr.func.startPause();

aby se to automaticky nezapínalo po načtení stránky. U tvého kódu mi to nejde vložit do input to

id="output"

Děkuji

 
Nahoru Odpovědět
3.1.2019 18:37
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.1.2019 18:38

Se spis zeptej, ktera z tech veci konkretne ti neni jasna.
Ja to jen prepsal do jakesi objektove struktury. Ty puvodni funkce by take sly pouzit. A prito jsem narazil na dalsi chyby, nahodne usporadane spousteni funkci nebo naprosto spatna funkce. A samozrejme jsem vyhodil status (stav) do funkce, abych nemusel opisovat 3 radky vsude.

 
Nahoru Odpovědět
3.1.2019 18:38
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na michal Čepelák
Peter Mlich:3.1.2019 18:39

Jo, ale to si prepis funkci output, aby pouzivala value misto innerHTML, ne? To mi prislo, ze jako jedine z toho chapes :)

el.output.innerHTML = str; //<span id="output"></span>
el.output.value= str; //<input id="output">

Editováno
 
Nahoru Odpovědět
3.1.2019 18:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.1.2019 18:44

Mimochodem, ja bych treba pro pocitani casu pouzival casove razitko (google = js new date example). FF a i jine prohlizece se snazi zastavit nebo zpomalit js, kdyz se prepnes do druheho okna. Pak ti to bude pocitat chybne, jak mas ted ten kod.

Ok, tak mozna bych pouzil oboji. A nebo precetl cas ze serveru (z php).
Vis, kdyby se pokusil uzivatel podvadet. Je mozne si zmenit v pc cas. A new date cte cas z pc uzivatele.

Editováno
 
Nahoru Odpovědět
3.1.2019 18:44
Avatar
michal Čepelák
Člen
Avatar
michal Čepelák:3.1.2019 18:47

děkuji
tak daleko jsem ještě nedošel tady na itnetwork v kurzu jsem na 8.lekci základů a to je až v 9.lekci.
Pracuji z javascriptem za pochodu bez toho abych to měl přečtené celé.
Děkuji za pomoc

 
Nahoru Odpovědět
3.1.2019 18:47
Avatar
michal Čepelák
Člen
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3.1.2019 18:50

děkuji
tak daleko jsem ještě nedošel tady na itnetwork v kurzu jsem na 8.lekci základů a to je až v 9.lekci.
Pracuji z javascriptem za pochodu bez toho abych to měl přečtené celé.
Děkuji za pomoc

 
Nahoru Odpovědět
3.1.2019 18:50
Avatar
michal Čepelák
Člen
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3.1.2019 19:51

ještě se zeptám je možné použivat v javascript stly co jsou přes css framework?
použivám semantic-ui a tam si v html zadám třeba stylovaní icon

<div class="ui play icon">
</div>

je možné tohle udělat i v javascriptu?
děkuji

 
Nahoru Odpovědět
3.1.2019 19:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:4.1.2019 10:11 
el.className = "ui play icon";

google = js class change example

Editováno
 
Nahoru Odpovědět
4.1.2019 10:11
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.