Hádanka v Javascriptu - řešení

Jedna pikohádanka v Javascriptu. Zkuste prosím tipnout bez vyzkoušení, komentáře jsou dočasně moderovány, aby nikdo neprozradil. Řešení pro ty co nevyzkouší prozradím odpoledne. (pardon, nelze tu použít ani del, ani span, ani tytle, ani style …)

Zadání

Představte si takovýto jednoduchý (XHTML Strict validní) kód pro checkbox s javascriptem na jeho popisku.

             <label for="test" onclick="alert(document.getElementById(this.htmlFor).checked)">
               Test:
               <input type="checkbox" name="test" id="test"/>
             </label>

Po kliknutí na popisek by se mělo objevit dialogové okno říkající, zda-li je checkbox zašrktnut (true) či nikoliv (false). Ti co znají dobře (X)HTML také ví, že při spojení popisku a formulářového prvku (pomocí „for“+ID) se kliknutím na popisek aktivuje příslušný formulářový prvek. Tipujte, co se stane (resp. v jakém pořadí), jedna z prvních 3 odpovědí je správná.

Řešení

Tak věřte nevěřte, správná odpověď je za ©. Pro mě z nepochopitelných důvodů se totiž při této konstrukci spustí daná onclick funkce dvakrát, jednou před aktivací a podruhé po aktivaci checkboxu. Když neuzavřete inputbox do labelu, tak se spustí (imho dle očekávání) jen jednou (před aktivací checkboxu). Zřejmě to není bug, chovají se tak všechny prohlížeče co znám. Není to ani nevalidní.

Nad touhle blbostí jsem trávil včera 2 hodiny – funkce měnila vzhled prvku po kliknutí, jenže se to okamžitě změnilo tam i nazpátek a já furt pátral proč to nefunguje. Vyřešil jsem to efektivně (a nakonec i lépe) přes onchange na Inputu. Dnes jsem měl podobný problém, tam to bylo prozměnu s radiobuttonem a pro změnu se u nějak dělo to samé ale tentokrát na onchange a nemusel být Label rodiči

Někdo se ptá, proč vůbec uzavírám Input do Labelu. Samozřejmě v tomto případě to není potřeba, osobně to ale využívám pro checkboxy a radiobuttony, protože pak nemusím nastavovat pro každý prvek ID (snažím se mít stejný ID a name a u checboxů kde je name Array by to nešlo). Navíc tím také mohu efektivně stylovat zvlášť „široké“ Input prvky (text, password) a zvlášť úzké (radio, checkbox), aniž bych to musel řešit přes třídy či ID:

     input, select, option { 


      width: 10 em; 


     }



     label input {


      width: 2 em;


     }