Diskuze: Problém s taby

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

tbartolen

Člen

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

Kattii

Člen

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

tbartolen

Člen

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 29.4.2018 18:53

Nahoru Odpovědět

29.4.2018 18:50

Navštiv www.fb.com/skkelticz

Matúš Olejník

Člen

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 */

tbartolen

Člen

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

tbartolen

Člen

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

Kattii

Člen

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

tbartolen

Člen

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

Peter Mlich

Člen

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).ready(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

Peter Mlich

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

Diskuze: Problém s taby