Diskusia – 7. diel - Vylepšenia objektového diáre v JavaScripte

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Patrik Pastor

Člen

Patrik Pastor:13.4.2019 20:52

const smazatButton = document.createElement("button");
smazatButton.onclick = () => {
if (confirm("Opravdu si přejete odstranit úkol?")) {
this.zaznamy = this.zaznamy.filter(z => z !== zaznam); // Ponechá vše co není rovné proměnné zaznam
this.ulozZaznamy();
this.vypisZaznamy();
}
};
smazatButton.innerText = "Smazat záznam";
this.vypisElement.appendChild(smazatButton);
this.vypisElement.innerHtml += "<br>";
}

A stejne to nejde smazat

Odpovedať

13.4.2019 20:52

Patrik Pastor

Člen

Patrik Pastor:13.4.2019 21:07

oprava, jede to ALE POUZE U POSLEDNIHO ZAZNAMU, proto jsem si myslel ze t nejede , kdyz jsem chtel mazat z prostredka... Jak to ale jde udelat, nebo jak to, ze zaznam lze mazat pouze posledni?

Odpovedať

13.4.2019 21:07

Martin

Člen

Martin :29.7.2019 15:35

Funguje vám řazení? Musel jsem zadávat datum ve formátu yyyy-mm-dd a pak následně upravit metodu serad zaznamy viz níže.....měl někdo podobný problém?

seradZaznamy() {
this.zaznamy.sort(function (zaznam1,zaznam2){
return (new Date(zaznam1.datum).getTime() - new Date(zaznam2.datum).getTime());
});
}

Editované 29.7.2019 15:38

Odpovedať

29.7.2019 15:35

Jakub Podskalský

Člen

Jakub Podskalský:27.10.2019 15:26

Zdravím. Kód nefunguje, nefunguje tlačítko "smazat záznam". Respektive se ani nezobrazí ten confirm. Snažil jsem se na to přijít sám, ale nenapadá mě příčina. Jshint v Sublime Textu mi hází jshint: warning W083 - Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (confirm). To se ale nezdá jako striktní problém. V další lekci jsou ohledně toho komentáře, nevidím tam ale žádné jasné řešení a nechce se mi pokračovat s kódem, když je nefunkční. Opravdu bych uvítal jakoukoliv pomoc. Díky.

Odpovedať

27.10.2019 15:26

Šimon Raichl

Tvůrce

Šimon Raichl:27.10.2019 16:21

Ahoj, vim o tom, tenkrat mi David dost zmenil kod pri korekture, ktery fungoval spravne, a pak hodne lidi zacalo psat, ze jim to nejde. Mozna bych se na to mel uz kouknout.

Odpovedať

27.10.2019 16:21

Jakub Podskalský

Člen

Jakub Podskalský:27.10.2019 16:35

Aha. Díky za rychlou odpověď. Když opomenu tu nefunkčnost, tak se mi tenhle úvod do OOP dost líbí. A skvěle vybraný projekt, na kterém se to demonstruje.
Takže tedy prosím o tu opravu, je to škoda.

Odpovedať

27.10.2019 16:35

Šimon Raichl

Tvůrce

Šimon Raichl:27.10.2019 16:43

Ted jsem na to koukal a je tam chyba v tom, ze se tam primo appenduje pomoci innerHTML nejaky HTMLko, jenze to ti samozrejme prekresli ten element a tim padem se ztrati eventy ze vsech elementu, to je taky duvod, proc to funguje jenom na poslednim zaznamu. Muzu ti sem poslat cely opraveny kod rovnou:

class Diar {

    constructor(jazyk = "cs-CZ") {
        const zaznamyZeStorage = localStorage.getItem("zaznamy");
        this.zaznamy = zaznamyZeStorage ? JSON.parse(zaznamyZeStorage) : [];
        this.jazyk = jazyk;

        this.nazevInput = document.getElementById("nazev");
        this.datumInput = document.getElementById("datum");
        this.potvrditButton = document.getElementById("potvrdit");
        this.vypisElement = document.getElementById("seznam-ukolu");

        this._nastavUdalosti();
    }

    _nastavUdalosti() {
        this.potvrditButton.onclick = () => { // this zůstane nyní stále this
                                if (this.datumInput.value !== "") {
                                        const zaznam = new Zaznam(this.nazevInput.value, this.datumInput.value);
                                        this.zaznamy.push(zaznam);
                                        this.ulozZaznamy();
                                        this.vypisZaznamy();
                                } else
                                        alert("Musíte vyplnit datum!");
                                };
    }

        seradZaznamy() {
                this.zaznamy.sort(function (zaznam1, zaznam2) {
                        return (new Date(zaznam1.datum) - new Date(zaznam2.datum));
                });
        }

        vypisZaznamy() {
                this.seradZaznamy();
                this.vypisElement.innerHTML = "";
                let posledniDatum = null;
                for (const zaznam of this.zaznamy) {
                        const kartaZaznamu = document.createElement("div");

                        if (zaznam.datum !== posledniDatum) {
                                const datum = new Date(zaznam.datum).toLocaleDateString(this.jazyk, {
                                        weekday: "long",
                                        day: "numeric",
                                        month: "short",
                                        year: "numeric"
                                });
                                kartaZaznamu.innerHTML += `<h3>${datum}</h3>`
                        }
                        posledniDatum = zaznam.datum;

                        kartaZaznamu.innerHTML += `<h4>${zaznam.nazev}</h4><br>úkol ${!zaznam.splneno ? "ne" : ""}splněn`;

                        this.vypisElement.appendChild(kartaZaznamu);

                        this._pridejTlacitko("Smazat", () => {
                                if (confirm("Opravdu si přejete odstranit úkol?")) {
                                        this.zaznamy = this.zaznamy.filter(z => z !== zaznam); // Ponechá vše co není rovné proměnné zaznam
                                        this.ulozZaznamy();
                                        this.vypisZaznamy();
                                }
                        });

                        this._pridejTlacitko("Označit jako " + (zaznam.splneno ? "nesplněný" : "splněný"), () => {
                                zaznam.splneno = !zaznam.splneno;
                                this.ulozZaznamy();
                                this.vypisZaznamy();
                        });
                }
        }

        _pridejTlacitko(titulek, callback) {
                const button = document.createElement("button");
                button.onclick = callback;
                button.innerText = titulek;
                this.vypisElement.appendChild(button);
        }

        ulozZaznamy() {
                localStorage.setItem("zaznamy", JSON.stringify(this.zaznamy));
        }

}

Odpovedať

27.10.2019 16:43

Jakub Podskalský

Člen

Jakub Podskalský:27.10.2019 19:06

Moc Ti děkuji, žes mi to hned takhle poslal. Ale stejně se musím možná hloupě zeptat... Jakým způsobem mi to překreslí ten element (a tím se myslí vypisElement, že?) a tím pádem se ztratí i všechny ostatní eventy? Když se to innerHTML přidává pomocí +=, tak jak se může něco překreslit, když se to pouze přidává k aktuálnímu HTML? Nechápu to. Třeba by stačilo jen trochu navést... Fakt mi to vrtá hlavou.

Odpovedať

27.10.2019 19:06

Šimon Raichl

Tvůrce

Šimon Raichl:27.10.2019 20:47

Rozumim tomu, ze si myslis, ze jen "pridavas HTML", ale takhle to bohuzel nefunguje. Ty vlastne prirazujes puvodni HTML + to tvoje HTML, takze to funguje takto:

element.innerHTML = element.innerHTML + someHtml;

Tim samozrejme prekreslis cely element a znicis puvodni elementy s jejich eventy a nahradis za tvoje HTML, kde tvoje elementy zadne eventy nastaveny nemaji.

Na dynamicky checkovani zmen v DOMu muzes pouzit MutationObserver a do callbacku si hodit to, ze nastavis event listenery nejakym elementum. Neco u MutationObserveru si muzes precist zde: https://developer.mozilla.org/…tionObserver

Odpovedať

27.10.2019 20:47

Šimon Raichl

Tvůrce

Šimon Raichl:27.10.2019 20:54

Jeste kratky dodatek: zkus si treba ve webovy konzoli tady na itnetworku spustit:

document.body.innerHTML += "";

Ted si zkus otevrit chat. Nepujde ti to. Asi by sis rekl, ze prece jen pridavas prazdny string, ale jak jsem psal nahore, tak to neni.

Jinou veci by bylo pouzit funkci insertAdjacentHTML, jako prvni parametr das pozici kam v elementu chces HTML vlozit a jako druhy parametr tvoje HTML.

document.body.insertAdjacentHTML("beforeend", "");

Tohle uz ti nic nerozbije.

Odpovedať

27.10.2019 20:54

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 7. diel - Vylepšenia objektového diáre v JavaScripte