NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!

Diskuze – Lekce 16 - Základy práce s DOM a události v JavaScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Pluhtík
Michal Žůrek - misaz:27.6.2018 20:22

Tak jak se to snažíš udělat je to složitější, musí se použít sofistikována funkce metoda bind. Správně je to

sum.onclick = after_Button.bind(null, 1, num1, num2);
sub.onclick = after_Button.bind(null, 2, num1, num2);
mul.onclick = after_Button.bind(null, 3, num1, num2);
div.onclick = after_Button.bind(null, 4, num1, num2);
pow.onclick = after_Button.bind(null, 5, num1, num2);

pak je jště tomu potřeba přizpůsobit

function after_Button(type, n1, n2) {
    document.write("<h1>Vysledek je: </h1>");
    if (type == 1)
        document.write(n1.value + n2.value);
    else if (type == 2)
        document.write(n1.value - n2.value);
    else if (type == 3)
        document.write(n1.value * n2.value);
    else if (type == 4)
        document.write(n1.value / n2.value);
    else
        document.write(Math.pow(n1.value, n2.value));
}

Jednodušší je to dělat jako ukazuje článek.

 
Odpovědět
27.6.2018 20:22
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Pluhtík:27.6.2018 20:24

Jsi si jistý, že má být n1.value atd.? Podívej se ještě jednou na můj kód - už jsem tam n1.value přímo přetypoval na integer.
Můžu vědět, co přesně dělá metoda bind?

 
Odpovědět
27.6.2018 20:24
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Pluhtík
Michal Žůrek - misaz:27.6.2018 20:29

jo jsem si naprosto jist. Metodě nepředáváš hodnotu elementu, ale samotný element, proto při výpočtech musíš přečíst hodnotu z elementu, který ti to předalo v parametrech. Metoda bind vytváří kopii funkci a nahrazuje kontext volání za první parametr a další parametry pak odpovídají parametrům při volání. Kontext volání nepoužíváš, tak jsem tam dal null. Celkově to je poměrně složitý přístup.

 
Odpovědět
27.6.2018 20:29
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Pluhtík
Michal Žůrek - misaz:27.6.2018 20:34

problém je v tom, že ty jsi tu funci nenastavoval jako událost ale ihned si ji volal.

sleduj rozdíl mezi tímto:

aaaa.onclick = funkce;

a

aaaa.onclick = funkce();

to první nastaví funkci jako událost kliknutí, ale nezavolá ji. Zavolá ji až jádro prohlížeče v okamžiku kdy klikneš na tlačítko. V druhém případě to funci zavolá hned a jako událost onclick to nastaví to, co funkce vrátí. Tvá funkce nevrátí nic, takže to žádnou událost nenastaví. To co chceš je případ 1, jenže tím že tam nemáš žádné závorky, potažmo ani parametry, tak si je tam musíš "dolepit" a přesně toto dělá funkce bind. Ona ti je přilepí aby tam byly a zároveň jsi to nevolal hned.

 
Odpovědět
27.6.2018 20:34
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Pluhtík:27.6.2018 20:37

Ano, já vím, došlo mi to.

Tak jinak. Není snad hodnotou elementu string? A jestli ano, tak n1.value mi nepomůže dosáhnout kalkulačky (přinejmenším ne takové kalkulačky, kterou bych mohl reálně použít na práci s čísly), nebo se mýlím?

Já mám v kódu

num1 = document.getElementById('n1');
num2 = document.getElementById('n2');
num1 = parseInt(num1.value);
num2 = parseInt(num2.value);

Aha, tak už vidím, proč jsem tě zmátl. Já omylem nepoužíval num1, num2 v té funkci, ale pouze n1, n2.
Bude tedy můj kód korektní za předpokladu, že doplním metodu bind a n1, n2 uvnitř funkce nahradím proměnnýma num1 a num2?

 
Odpovědět
27.6.2018 20:37
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Pluhtík
Pluhtík:27.6.2018 20:47

Blbost, to ty jsi zmátl mě :D n1 a n2 jsou parametry funkce. Takže s num1 a num2 reálně pracuji, protože jsem je zadal jako parametry n1 a n2.

 
Odpovědět
27.6.2018 20:47
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Pluhtík
Michal Žůrek - misaz:27.6.2018 21:01

aha, takže odmaž

num1 = parseInt(num1.value);
num2 = parseInt(num2.value);

a ve výpočtu nahraď n1.value za parseInt(n1.value)

 
Odpovědět
27.6.2018 21:01
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Pluhtík:27.6.2018 21:04

Děkuji, udělal jsem to asi minutu předtím :) každopádně s metodou bind jsi mi pomohl (vím, že to první poděkování může vyznít ironicky, není to ironie, myslím to vážně ;) )

 
Odpovědět
27.6.2018 21:04
Avatar
Tomáš Pekár
Člen
Avatar
Tomáš Pekár:26.3.2020 17:07

V předposledním odstavci je chyba ve slově "podložku". Místo toho má být logicky slovo "podsložka". Jinak děkuji za tyto kurzy, jsou pěkné a poučné. :)

 
Odpovědět
26.3.2020 17:07
Avatar
Martin Přikryl
Člen
Avatar
Martin Přikryl:29.12.2020 15:32

onclick je zde málo vysvětlený. Jen je zmíněno, že vkládáme funkci a neuvádíme závorky. Už tam ale není důvod. A důvodem nejspíš je, že kdybychom uvedli závorky, již nepředáváme funkci, ale její výsledek. Ale jak je to s funkcemi s parametry - ty v onclick nelze použít?

 
Odpovědět
29.12.2020 15:32
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 10 zpráv z 61.