Content aan button toevoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Guido  -

Guido -

19/04/2021 20:06:28
Quote Anchor link
Hallo,

Ik wil graag content toevoegen aan een button, zonder onclick aan de HTML vd button toe te moeten voegen.
Ik dacht het zo te moeten doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<script>
window.addEventListener('DOMContentLoaded', function() {
    var toggle = document.getElementsById("nav-toggle");
    toggle.addEventListener('click', function() {
        alert("hallo");
    });  
});
</script>

<button id="nav-toggle">Mijn button</button>


Maar niets... wat doe ik fout?

Guido
 
PHP hulp

PHP hulp

19/03/2024 06:42:03
 
Rob Doemaarwat

Rob Doemaarwat

19/04/2021 20:17:42
Quote Anchor link
Tip: kijk eens in de "Console" van je browser (Chrome en co: Ctrl+Shift+I, en dan tab "Console") ...
 
Guido  -

Guido -

19/04/2021 21:09:55
Quote Anchor link
Dank, wist niet dat je Javascript ook zo eenvoudig kon debuggen..

Ik zie dat ik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
getElementsById
ipv
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
getElementById
heb gebruikt. Dat werkt niet.

Guido
 
Ad Fundum

Ad Fundum

20/04/2021 10:07:17
Quote Anchor link
Naar aanleiding van je vorige post , het is niet zo dat je voor elk dingetje een aparte functie hoeft te maken via
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
window.addEventListener('DOMContentLoaded', function() { /* ... */ });

De functie 'click' heb je al, dus je zou binnen die functie iets kunnen doen als:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
button.addEventListener('click', function() {
  let ul = this.parentNode.getElementsByTagName('ul')[0];
  if (ul.style.display == 'block') {
    ul.style.display = 'none';
    button.innerHTML = '+';
  } else {
    ul.style.display = 'block';
    button.innerHTML = '-';
  }
});
Gewijzigd op 20/04/2021 10:08:59 door Ad Fundum
 
Guido  -

Guido -

20/04/2021 18:02:48
Quote Anchor link
Ik zal dit dan alleen als "wrapper" om alles heen zetten en niet elke keer opnieuw gebruiken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
window.addEventListener('DOMContentLoaded', function() {


Guido
 
Ad Fundum

Ad Fundum

21/04/2021 14:56:06
Quote Anchor link
Die wrapper koppelt een functie aan een event. Natuurlijk kan en mag je meerdere functies aan een enkel event koppelen. Maar dan heb je geen garantie in welke volgorde de functies worden uitgevoerd. Als je het allemaal in één functie zet, heb je dat wel. Voor het overige scheelt het gewoon code.
 
Guido  -

Guido -

21/04/2021 16:45:47
Quote Anchor link
Hoi,

Ik dacht dat dit een goede manier was.
De wrapper die ervoor zorgt dat alles niet te vroeg geladen wordt. Daarbinnen 1 functie voor tonen menu en 1 functie voor tonen submenu.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
window.addEventListener('DOMContentLoaded', function() {
    // eerste functie
    menu-toggle.addEventListener('click', function() {
    });

    // tweede functie
    submenu-toggle.addEventListener('click', function() {
    });
});


Guido
 
Ad Fundum

Ad Fundum

21/04/2021 19:50:24
Quote Anchor link
Dat is helemaal prima natuurlijk.

Wat ik bedoelde is dat als je twee keer aan dezelfde button een functie aan het event 'click' zou hangen.
Dan weet je niet precies welke functie eerder wordt uitgevoerd als je op de button klikt.
Maar daarvan is hier geen sprake, dus niet iets om rekening mee te houden.

Overigens kan je de anonieme functies ook namen geven, dan kan je ze later hergebruiken als je dat wilt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <script>
      window.addEventListener('DOMContentLoaded', init = function() {
        alert('Ping en klaar!');
      });
    </script>
  </head>
  <body>
    <button onclick="init();">INIT</button>
  </body>
</html>
Gewijzigd op 21/04/2021 19:55:03 door Ad Fundum
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.