NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

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
Nejnovější komentáře jsou na konci poslední stránky.
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.

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?

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.

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.

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?

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.

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)

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ě ;) )

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é. :)

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?

Nejnovější komentáře jsou na konci poslední stránky.
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 62.