Content aan button toevoegen

Door Guido - op 19-04-2021 20:06

1.928 views

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:


<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

R Rob Doemaarwat

19-04-2021 20:17

Tip: kijk eens in de "Console" van je browser (Chrome en co: Ctrl+Shift+I, en dan tab "Console") ...

Guido -

19-04-2021 21:09

Dank, wist niet dat je Javascript ook zo eenvoudig kon debuggen..

Ik zie dat ik

getElementsById

ipv

getElementById

heb gebruikt. Dat werkt niet.

Guido

? Onbekende gebruiker

20-04-2021 10:07 gewijzigd op 20-04-2021 10:08

Naar aanleiding van je vorige post , het is niet zo dat je voor elk dingetje een aparte functie hoeft te maken via

window.addEventListener('DOMContentLoaded', function() { /* ... */ });

De functie 'click' heb je al, dus je zou binnen die functie iets kunnen doen als:

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 = '-';
  }
});

Guido -

20-04-2021 18:02

Ik zal dit dan alleen als "wrapper" om alles heen zetten en niet elke keer opnieuw gebruiken:


window.addEventListener('DOMContentLoaded', function() {

Guido

? Onbekende gebruiker

21-04-2021 14:56

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 -

21-04-2021 16:45

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.


window.addEventListener('DOMContentLoaded', function() {
	// eerste functie
	menu-toggle.addEventListener('click', function() {
	});

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

Guido

? Onbekende gebruiker

21-04-2021 19:50 gewijzigd op 21-04-2021 19:55

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:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.addEventListener('DOMContentLoaded', init = function() {
        alert('Ping en klaar!');
      });
    </script>
  </head>
  <body>
    <button onclick="init();">INIT</button>
  </body>
</html>

Reageren

Inloggen om te reageren