Autor Zpráva
Jerrry
Profil
Zdravím,

začínám s javascriptem a narazil jsem na svůj první problém (odkaz ke stažení na celý kód včetně obrázků -http://leteckaposta.cz/387524807)

Mám dva obrázky (puntíky) vedle sebe a potřeboval bych, aby po stisknu tlačítka "Začít" probliknul první obrázek (puntík) a následně druhý.


Při prvním kliknutí na tlačítko "Začít" skutečně oba probliknou, jak bych chtěl, ale při druhém kliknutí už se nic nestane. Zřejmě je to začátečnická chyba (špatně napsaná funkce apod.), tak bych chtěl poprosit o pomoc.

Kód:

<script>

obr = obra = obraz = -1;
cas=cas1=cas2 = 100;

function test2(){


obrazky2 = ["bila.png","zelena.png"];
   
for (k=1; k<2; k++) {
if (obra+1==obrazky2.length) obra=k;
    
else obra++;

document.obraz2.src = obrazky2[obra];     
window.setTimeout('test2()',cas1); 
  }
}


function test3(){

obrazky3 = ["bila.png","modra.png"];
   
for (l=1; l<2; l++) {
if (obraz+1==obrazky3.length) obraz=l;
    
else obraz++;

document.obraz3.src = obrazky3[obraz];     
window.setTimeout('test3()',cas2); 
  }
}


function jede(){  

  
window.setTimeout('test1()',300); 
window.setTimeout('test2()',600); 
window.setTimeout('test3()',900);


}


    
</script>


<button onclick="jede()">Začít</button>
<p></p>

<img id="zelena" src="zelena.png" name="obraz2">

<img id="modra" src="modra.png" name="obraz3">

Jerrry


ten Test1 ve funkci jede() jsem vyhodil, takže toho si nevšímat :)
Marek88
Profil
Řekl bych, že za to mouhou proměnné obra a obraz, které jsou na začátku nastavené na -1, ale při dalším použití v nich zůstává poslední hodnota a proto nedojde ke splnění podmínek na řádcích 12 a 27.

Celkově je to ale napsané trochu dost nepřehledně. Myslím hlavně ty proměnné obra a obraz plus ten forcyklus.

Mohlo by to vypadat třeba nějak takto:
var cas1 = cas2 = 100;
 
    // Funkce, které se předá jakým elementem má bliknout,
    // co tam dát za obrázky a jaká má být délka bliknutí
    function test(elm, prvni, druhy, cas){
        elm.src = prvni;  
        window.setTimeout(function(){
            elm.src = druhy;  
        }, cas); 
    }

    function jede(){  
        window.setTimeout(function(){
            test(document.obraz2, "bila.png", "zelena.png", cas1);
        },300);
        
        window.setTimeout(function(){
            test(document.obraz3, "bila.png","modra.png", cas2);
        }, 600); 
    }

EDIT: Ještě koukám, že obrázky probliknou a pak se vrátí zpět na původní hodnotu. Takže by šlo funkci test změnit takto:
    function test(elm, prvni, cas){
        var puvodni = elm.src; // tady si uložíš původní obrázek *
        elm.src = prvni;  
        window.setTimeout(function(){
            elm.src = puvodni; // a tady ho se zpožděním nastavíš zpátky
        }, cas); 
    }

* To var je tam důležité, aby proměnná byla lokální. Kdyby to tam nebylo, tak by byla považována za globální. Tím pádem by se při dalším zavolání téhle funkce změnila svojí hodnotu a to je v tomhle případě nežádoucí.
Jerrry
Profil
Mohl bys, prosím, dát funkční kód v jednom celku? Aspoň uvidím, co funguje... a co ne :)

Díky!
Marek88
Profil
<script>
    var cas1 = cas2 = 100;
 
    function probliknoutObrazek(elm, prvni, cas){
        var puvodni = elm.src;
        elm.src = prvni;  
        window.setTimeout(function(){
            elm.src = puvodni;  
        }, cas); 
    }

    function nastavitProbliknuti(){  
        window.setTimeout(function(){
            probliknoutObrazek(document.obraz2, "bila.png", cas1);
        },300);
        
        window.setTimeout(function(){
            probliknoutObrazek(document.obraz3, "bila.png", cas2);
        }, 600); 
    }
</script>

<button onclick="nastavitProbliknuti()">Začít</button><br>
<img id="zelena" src="zelena.png" name="obraz2">
<img id="modra" src="modra.png" name="obraz3">
Jerrry
Profil
Supr, díky za pomoc...

S tou přehledností to snad bude časem lepší, musím se to pořádně naučit. :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: