Skip to content

Latest commit

 

History

History
97 lines (77 loc) · 3.86 KB

riesenie.md

File metadata and controls

97 lines (77 loc) · 3.86 KB
Raw

Rozcestník

ShowHide - (JS, CSS)

Riešenie

Táto úloha sa dá vyriešiť iba s pomocou JavaScriptu. Prvým krokom bude vytvorenie časti kódu, ktorý sa spustí až po načítaní HTML dokumentu zo servera. To sa dá docieliť nasledovným kódom:

window.onload = function () {
    // kód, ktorý sa spustí po načítaní dokumentu    
}

Ako prvé po stiahnutí stránky zo servera skript získa kolekciu všetkých h1 elementov v celom dokumente:

window.onload = function () {
    let h1s = document.querySelectorAll("h1");
    for (let i = 0; i < h1s.length; i++) {
        let h1 = h1s[i];
    }
}

Funkcia sa pre zobrazovanie a skrývanie má vykonať po kliknutí na element h1. Spustenie tejto funkcie realizujeme pomocou priradenia funkcie na obsluhu udalosti onclick.

window.onload = function () {
    let h1s = document.querySelectorAll("h1");
    for (let i = 0; i < h1s.length; i++) {
        let h1 = h1s[i];
        h1.onclick = function () {
        }
    }
}

Na to, aby sme daný element p mohli skrývať a zobrazovať, potrebujeme získať jeho inštanciu. Pre jej získanie môžeme využiť fakt, že všetky elementy HTML dokumentu sú zoradené v hierarchickej stromovej štruktúre DOM.

Keď sa pozrieme na HTML štruktúru úlohy vidíme, že ako element h1, tak element p sú potomkami práve vždy jedného rodičovského elementu div. Existuje viacero prístupov, ako prechádzať elementy v DOM štruktúre. Vzhľadom na to, že v našom prípade jeden div obsahuje vždy iba jeden element h1 a p, stačí, ak získame ďalšieho súrodenca elementu h1 (bude to vždy element p). Referencia na susedný element sa nachádza v atribúte HTMLElement.nextElementSibling.

window.onload = function () {
    let h1s = document.querySelectorAll("h1");
    for (let i = 0; i < h1s.length; i++) {
        let h1 = h1s[i];
        h1.onclick = function () {
            let p = h1.nextElementSibling;
        }
    }
}

Skrývanie a zobrazovanie elementov p realizujeme upravením CSS vlastnosti display. JavaScript môže priamo modifikovať CSS daného elementu prostredníctvom atribútu style. Ak chceme nejaký element skryť, urobíme to nasledovne:

domElement.style.display = "none";

Priradená hodnota je vložená prostredníctvom reťazca a vieme ju priradiť aj získať. To využijeme pri rozhodovaní, či daný element p skryjeme, alebo zobrazíme. Ak bude domElement.style.display obsahovať hodnotu none, znamená to, že je element p skrytý a je ho potrebné zobraziť. V inom prípade sa skryje.

window.onload = function () {
    let h1s = document.querySelectorAll("h1");
    for (let i = 0; i < h1s.length; i++) {
        let h1 = h1s[i];
        h1.onclick = function () {
            let p = h1.nextElementSibling;
            if (p.style.display == "none") {
                p.style.display = "inline";
            } else {
                p.style.display = "none";
            }
        }
    }
}

Posledný krok bude úprava CSS a doplnenie formátovania, ako aj zmena kurzora pre element h1 tak, aby indikoval používateľovi, že sa naň dá kliknúť. Zmenu kurzora zabezpečíme pridaním CSS vlastnosti cursor: pointer;. CSS bude vyzerať nasledovne:

body {
    margin: 1% 20%;
}

h1 {
    cursor: pointer;
}