NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
tbartolen
Člen
Avatar
tbartolen:29.4.2018 18:30

Zdar!
Snažím se udělat taby. Vše mi funguje. Ted chci nastavit, aby TAB s ID default open byl po nčtení stránky kliknutý.

HTML

<div class="switch">
     <button class="tablinks bg" onclick="openMenu(event, 'hlMenu')" id="defaultOpen">Menu</button>
     <button class="tablinks bg_1" onclick="openMenu(event, 'rozvozMenu')">Rozvozové Menu</button>
     <button class="tablinks bg_2" onclick="openMenu(event, 'napojMenu')">Nápojový lístek</button>
 </div>

a JS mám tady

let buttons = document.getElementsByClassName("btn");
for(let i = 0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){
        let div = document.getElementById("drop_"+(i+1));
        div.classList.toggle("displayNone");
    })
}


let buttonsRozvoz = document.getElementsByClassName("btnRozvoz");
for (let i = 0; i < buttons.length; i++) {
    buttonsRozvoz[i].addEventListener("click", function () {
        let div = document.getElementById("dropRozvoz_" + (i + 1));
        div.classList.toggle("displayNone");
    })
}




function openMenu(evt, menuName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(menuName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

Jenže když to pustím, tak vše funguje, až na tu poslední funkci, která mi do konzole píše :

Uncaught TypeError: Cannot read property 'click' of null
    at menu.js:44

Nevíte proč Vždyt název toho ID mám v pořádku, ne?

Odpovědět
29.4.2018 18:30
Navštiv www.fb.com/skkelticz
Avatar
Kattii
Člen
Avatar
Kattii:29.4.2018 18:44

a co dát do <body> onLoad a tam nastavit, že defaultOpen bude vybranej?

 
Nahoru Odpovědět
29.4.2018 18:44
Avatar
tbartolen
Člen
Avatar
Odpovídá na Kattii
tbartolen:29.4.2018 18:50

já nechci právě dávat JS do HTML...mám to v oddělených souborech. Když jsem to měl celé v jednom s HTML tak to fungovalo. Napadlo mě dát tam document.ready funkci nad to...

ALe to stejně nepomuže

Editováno
Nahoru Odpovědět
29.4.2018 18:50
Navštiv www.fb.com/skkelticz
Avatar
Matúš Olejník
Člen
Avatar
Odpovídá na tbartolen
Matúš Olejník:29.4.2018 18:53

Událost onload
Abychom se nemuseli strachovat jestli je skript na konci stránky a jestli se spouští ve chvíli, když je stránka kompletně načtená, využijeme události onload. Ta se nalézá na objektu window a spustí se ve chvíli, kdy je celá stránka načtená (i včetně obrázků a podobně). Upravíme náš kód tak, aby se spustil právě po načtení stránky bez ohledu na to v jaké části stránky je vložený. K obsluze událostí tentokrát využijeme anonymní funkce, které jsme se naučili v minulé lekci.

8. díl - Základy práce s DOM a události v JavaScriptu
Michal Žůrek (misaz)

Snáď pomôže :)

Nahoru Odpovědět
29.4.2018 18:53
/* I am not sure why this works but it fixes the problem */
Avatar
tbartolen
Člen
Avatar
Odpovídá na Matúš Olejník
tbartolen:29.4.2018 18:58

To není dobrý řešení. Mám to ve WP, takže JS linkuju v header.php ...
Pokud celý ten soubor wrapnu do .onload, tak se nespustí vůbec
Zkoušel jsem ještě $document.(ready) a taky nešlo

Nahoru Odpovědět
29.4.2018 18:58
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:29.4.2018 19:04

edit:
Tak jQuery nejde proto, že to je WP a nemám ho do WP includovaný, takže nefunguje deklarace jQuery jako takového...co by to udělalo pak, nevím. Je nějaká alternativa document ready v javascriptu?

Nahoru Odpovědět
29.4.2018 19:04
Navštiv www.fb.com/skkelticz
Avatar
Kattii
Člen
Avatar
Odpovídá na tbartolen
Kattii:29.4.2018 19:10

nijak zběhlá v js nejsem, ale snad najdeš řešení:
https://www.sitepoint.com/…-javascript/

 
Nahoru Odpovědět
29.4.2018 19:10
Avatar
tbartolen
Člen
Avatar
tbartolen:29.4.2018 19:13

edit:

Tak když to dám do footeru ten link, tak to jede čistě...

Nahoru Odpovědět
29.4.2018 19:13
Navštiv www.fb.com/skkelticz
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.5.2018 14:33

js: window.onload = function() { funkce1(); funkce2(); }
html: <body onload=" funkce1(); funkce2(); ">
html: <body> ... <script> funkce1(); funkce2(); </script></body> // script na konci pred /body
js jquery: $(document).re­ady(function() { funkce1(); funkce2(); });

Problem je, kdy napises
window.onload = funkce1;
window.onload = funkce2; nebo
window.onload = function() { funkce1(); }
window.onload = function() { funkce2(); } je to pak obdoba
a = 1
a = 2
alert(a) // vypise 2, portoze jsi obsah promenne zmenil z 1 na 2
Takze v pripade onload se spusti pak jen funkce2. Protoze objekt.onload je promenna onload. Tam nic nespoustis, zatim jen prirazujes.

 
Nahoru Odpovědět
2.5.2018 14:33
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.5.2018 14:51

Mimochodem, nefunguje ti to proto, ze kdyz to das do head, body jeste neexistuje. Takze reseni je prave to onload nebo tag script pred /body a ne pred /head. S tim head je to strasne houpy zvyk z davnoveku. Lidi si pak stezuji, ze jim scripty nefunguji.

Spatne nebo onload
<head>
<script src=...></script>
</head>
<body> ... </body>

lepsi
<head>
</head>
<body>
... (html, tagy) ...
<script src=...></script>
</body>
 
Nahoru Odpovědět
2.5.2018 14:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.