Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Diskuze: Nefunguje function javascript v formuláři FORM

Aktivity (2)
Avatar
michal Čepelák:2. ledna 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. ledna 20:24
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na michal Čepelák
Šimon Raichl:2. ledna 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. ledna 22:50
Avatar
Odpovídá na Šimon Raichl
michal Čepelák:2. ledna 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 2. ledna 22:57
 
Nahoru Odpovědět 2. ledna 22:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. ledna 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 3. ledna 11:36
 
Nahoru Odpovědět 3. ledna 11:34
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. ledna 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. ledna 11:40
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3. ledna 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. ledna 16:29
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. ledna 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 3. ledna 18:31
 
Nahoru Odpovědět 3. ledna 18:29
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3. ledna 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. ledna 18:37
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. ledna 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. ledna 18:38
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na michal Čepelák
Peter Mlich:3. ledna 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 3. ledna 18:41
 
Nahoru Odpovědět 3. ledna 18:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. ledna 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 3. ledna 18:45
 
Nahoru Odpovědět 3. ledna 18:44
Avatar
michal Čepelák:3. ledna 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. ledna 18:47
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3. ledna 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. ledna 18:50
Avatar
Odpovídá na Peter Mlich
michal Čepelák:3. ledna 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. ledna 19:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:4. ledna 10:11
el.className = "ui play icon";

google = js class change example

Editováno 4. ledna 10:12
 
Nahoru Odpovědět 4. ledna 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.