Zlepšení zápisu js

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod RednammoC 28. 11. 2022 03:42

Dobrý den, chci se zeptat, ještě. Abych zapnul funkci, dělám to zatím vždy tak, že pod funkci dávám což funguje
Kód: Vybrat vše
var zapnout1 = document.getElementById('funkce1');
zapnout1.onclick = fuunkce1;

níže napíšu celý kód ale co mě zajímá je, neexistujeli lepší způsob, než to psát pod každou funkci, kterou chci odkazem vyvolat, například nějak cyklem. Jak by se to dalo použit efektivněji v případě, že budu chtít přidávat další a další funkce, které zapínám odkazem.
html
Kód: Vybrat vše
<li><a id="funkce1" href="#">Kalkulačka duchod</a></li>
<li><a id="funkce2" href="#">Expressions zápis</a></li>

js
Kód: Vybrat vše
function fuunkce1() {
    function kalkulackaVeku(datumNarozeni) {
        return 2022 - datumNarozeni;
    }
    function kalkulackaDuchodu(datumNarozeni1, jmeno) {
        var vek = kalkulackaVeku(datumNarozeni1);
        var duchod = 65 - vek;
        duchod <= 0 ? (duchod = ("Jsi v duchodu ")) : duchod = ("Půjdeš do důchodu za " + duchod);
        console.log(duchod, jmeno);
    }
    kalkulackaDuchodu(1920, "Dan");
    kalkulackaDuchodu(2005, "Pavel");
}
var zapnout1 = document.getElementById('funkce1');
zapnout1.onclick = fuunkce1;
// ------------------------------------------------------------
// Funkce - Expressions
//***********************-------------------------------------------
function fuunkce2() {
    var kalkulackaVeku = function(datumNarozeni) {
        return 2022 - datumNarozeni;
    }

    var hrac1 = kalkulackaVeku(2010);
    console.log(hrac1);
}
var zapnout2 = document.getElementById('funkce2');
zapnout2.onclick = fuunkce2;
RednammoC
Junior

Odeslat příspěvekod Wikan 28. 11. 2022 08:08

Kód: Vybrat vše
for (let i = 1; i <= 2; i++) {
    const nazev = "funkce" + i;
    const element = document.getElementById(nazev);
    const funkce = window[nazev];

    element.addEventListener("click", funkce);
}


Za předpokladu, že elementy mají ID ve tvaru "funkceX" a samotné funkce se jmenují stejně (a tedy ne "fuunkce").
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod RednammoC 3. 12. 2022 21:00

-Rozumím podmínkám cyklu, const nazev i proč const elemnt, díky tomu bude v elementu uložena hodnota funkce1, funkce2, funkce3.
Kód: Vybrat vše
for (let i = 1; i <= 3; i++) {
    const nazev = "funkce" + i;
    const element = document.getElementById(nazev);


-Ale bohužel i když jsem koukal na internet, nerozumím co dělá:
Kód: Vybrat vše
    const funkce = window[nazev];
    element.addEventListener("click", funkce);


-Mohl by jsi mi to vysvětlit na upraveném kódu níže, který by jsi dal do funkčního stavu prosím?

Mám
html
Kód: Vybrat vše
<ul class="vedlejsiMenu">
    <li><a id="funkce1" href="#">getElementByClassName</a></li>
    <li><a id="funkce2" href="#">getElementByID</a></li>
    <li><a id="funkce3" href="#">getElementByTagName</a></li>
</ul>


js
Kód: Vybrat vše
for (let i = 1; i <= 2; i++) {
    const nazev = "funkce" + i;
    const element = document.getElementById(nazev);
    const funkce = window[nazev];

    element.addEventListener("click", funkce);

     function funkce1(){
          console.log("první");
     }
     function funkce2(){
          console.log("druhý");
     }
     function funkce3(){
          console.log("třetí");
     }
}
RednammoC
Junior

Odeslat příspěvekod Wikan 4. 12. 2022 01:02

Najde funkci podle jejího názvu:
Kód: Vybrat vše
const funkce = window[nazev];

Zaregistruje "click" událost daného elementu:
Kód: Vybrat vše
element.addEventListener("click", funkce);

V podstatě podobně jako ve tvém původním zápisu, ale moderněji.
Kód: Vybrat vše
element.onclick = funkce;

Jinak pro zprovoznění stačí dát ty funkce mimo cyklus (tam opravdu nedávají smysl) a změnit 2 na 3.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod RednammoC 7. 12. 2022 10:14

pořád mi to nejde, a to se fakt snažím :D
chyba (Uncaught SyntaxError: Unexpected end of input (at 0js-test-script.js:17:2))

html
Kód: Vybrat vše
<ul>
        <li><a id="funkce1" href="#">jedna</a></li>
        <li><a id="funkce2" href="#">dva</a></li>
        <li><a id="funkce3" href="#">tri</a></li>
    </ul>


js
Kód: Vybrat vše
for (let i = 1; i <= funkce.length; i++) {
    const nazev = "funkce" + i;
    const element = document.getElementById(nazev);
    const funkce = window[nazev];

    element.addEventListener("click", funkce);
}

function funkce1(){
    console.log("ahoj1");
}
function funkce2(){
    console.log("ahoj2");

function funkce3(){
    console.log("ahoj3");
}
RednammoC
Junior

Odeslat příspěvekod Wikan 7. 12. 2022 11:05

Z jakého důvodu sis odmazal ukončovací závorku "}" u funkce2?
A co je proměnná "funkce", kterou používáš ve for cyklu? (funkce.length)
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod RednammoC 7. 12. 2022 11:55

1 - "}" u funkce 2 dospaná, toho sem si nevšiml
2 - no jasny to je blbost , myslel jsem ze ji za definuju pod délkou pole kam se uložili jednotlivé pole ale dam tam místo toho 3

Jsi Buh, už to jede :D

ps.
Kód: Vybrat vše
const funkce = window[nazev];

funkce teda není pole s jednotlivými indexy?

které by se pak dali jednotlivě vypsat např. funkce[0]; ?
RednammoC
Junior

Odeslat příspěvekod Wikan 7. 12. 2022 13:20

Pokud si takové pole sám nevytvoříš, tak tam určitě nebude.
Wikan
Moderátor
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků