Autor Zpráva
Pam pam
Profil *
Zdravím,
tady na hoře mám formulář, který by měl po kliknutí zobrazit jenom ty vybrané bloky. Je to funkce hideSwitcher(). Funguje to tak, že po kliknutí se projdou inputy, z nich si JS vezme name a pomocí documnet.getElementById vrátí blok, který chci schovat.
docs.jednoduse.cz
Funguje to jen na začátku, ale pak to přestane fungovat správně.
Nedaří se mi odhalit chybu v logice.
Kajman
Profil
Pošlete sem funkci HideSwitcher, na stránce není. Vyvarujte se duplicitních id - hlavně pokud jedno id chcete schovat.
Pam pam
Profil *
Pardón, nahrál jsem na server nesprávný soubor, mám to v header.php. Už jsem to aktualizoval.
Kajman
Profil
Stále tam máte duplicitní id, proto to nebude fungovat! Dvojice <label for><input id> a <input name><div id> musí mít jiný identifikátor. Navíc musíte dodržovat velikost písmen v názvu funkce. Jednou máte hideSwitcher jednou HideSwitcher.
Pam pam
Profil *
Chcete říct, že když mám div id=US a mám input name=US tak je to špatně?
Problém je, že právě to name beru abych ho použil k získání elementu div.
label for jsem opravil.
Kajman
Profil
Ne, tato kombinace je správná. Ale u toho inputu máte i atribut id a jako na potvoru také se stejnou hodnotu US. Proto podle name najdete id US, ale může to být ten input místo toho divu.

Živá ukázka
Pam pam
Profil *
Ale já mám takový dojem, že jste se díval na ten neaktualizovaný soubor. Protože jsem nahrával index.php místo header.php . Vy jste se na to podíval a tam asi nebyly ty aktuální idéčka. Aktuální idéčka mám takto s příponou f_:
<fieldset id=HideBlocks>
<legend>Tato funkce se právě testuje...
</legend>
    <input type="checkbox" id="f_CCA" name="CCA" checked>
    <label for="f_CCA" title="Kanadská Covid Care Alliance">CCA</label>
    
    <input type="checkbox" id="f_US" name="US" checked>
    <label for="f_US" title="Rozsudky Ústavního Soudu">ÚS</label>
    <input type="checkbox" id="f_Facebook" name="Facebook" checked>
    <label for="f_Facebook" title="Facebook">FB</label>
    <input type="checkbox" id="f_Youtube" name="Youtube" checked>
    <label for="f_Youtube" title="Youtube">YT</label>
    <input type="checkbox" id="f_doporucene" name="doporucene" checked>
    <label for="f_doporucene">doporučené</label>
    <input type="button" id="f_hide" name="hide" value="Schovat bloky" onclick="hideSwitcher(this)">
</fieldset>

Kontroloval jsem to několikrát (zobrazím kód a dám hledat id= a vidím to barevně v prohlížeči - takže slepý snad nejsem).
Kajman
Profil
Tak super, hlavní problém je opraven. Ještě v té funkci používáte neplatnou hodnotu pro display. Mrkněte na tu živou ukázku.
Pam pam
Profil *
Díky. Myslím, že ta logika ta funkce jakš takž funguje, ještě se podívám jestli někde nemám chybu. Ještě studie jsem tam nedal, to taky chci schovat...
Pam pam
Profil *
Ještě mám dotaz. Všiml jsem si, když otevřu stránku je to OK. Když aktualizuji pomocí F5, tak se vše schová automaticky. Kdežto já chci aby se bloky schovaly jen pokud kliknu na tlačítko. Jak to opravit?
Kajman
Profil
Nebudete nastavovat onload.
Pam pam
Profil *
Mohl byste mi prosím ještě poradit, když si tu stránku uložíte do PC a přepíšete tu funkci a zkuste ve FF:
function hideSwitcher() {
var childs = document.querySelector('fieldset#HideBlocks').children;
for(var i = 0; i < childs.length; ++i){ 
    if(childs[i].type == 'checkbox') {
          var block = document.getElementById(    childs[i].name);
            if(childs[i].checked) {
                childs[i].checked = false                
                block.style.display="none";
                console.log(childs[i].name);
            console.log("Turned Off");
            } else
            {
                childs[i].checked = true
                block.style.display="block";
                console.log(childs[i].name);
            console.log("Turned On");
            }
       }
    }
}
Nastavím CCA checked. Ostatní nevybrané. Zvolím schovat prvky. CCA zmizí (To je ten první blok s číslama). Toto je OK.
Vymažu console log. A zase zmáčknu Schovat prvky. Tak má se zobrazit CCA. console log píše že CCA je zapnuté, ale očividně není. Styl nastavený:
<div id="CCA" style="display: none;">
Takže je vidět že ta větev nefunguje:
else
{
childs[i].checked = true
block.style.display="block";
console.log(childs[i].name);
console.log("Turned On");
}

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:

0