Meerdere code snippets in zelfde bestand

Door Guido - op 08-01-2026 16:00

1.266 views

Hoi,

Mijn kennis van JS is minimaal.

Ik heb een site en voor een paar onderdelen daarvan gebruik ik JS. Nu wil ik dat in 1 JS-bestand zetten. Uiteraard netjes en zoals het hoort. Daar heb ik een vraag over..

Ik gebruik functies zoals:

window.onload = function() {

Dat is goed zo.
Maar ik heb ook JS die niet binnen een functie valt, zoals:

if(document.getElementById("mijn-id")) {

Is die laatste in een soort van algemene container/functie te zetten?
Of kan dat gerust in hetzelfde bestand staan?

Guido

- Ariën -

08-01-2026 21:32 gewijzigd op 08-01-2026 21:33

Persoonlijk zou ik dit aanraden:


document.addEventListener("DOMContentLoaded", function () {
    if (document.getElementById("mijn-id")) {
        // code
    }

    // andere Javascripts
});

Dit wordt dan geladen zodra de DOM volledig ingeladen is. Dus je komt nooit voor verrassingen te staan.

Guido -

09-01-2026 00:14

Jij bedoelt dus om dit als container te gebruiken voor al mijn code?
Zo ja, moet dan even nakijken of dat op tijd is voor mijn onload functie. Want ik las dat DOMContentLoaded eerder laad.

- Ariën -

09-01-2026 01:37

document.addEventListener("DOMContentLoaded", function() { } is sneller dan window.onload().

Guido -

09-01-2026 12:41

Ik gebruik window.onload om formulier te resetten na versturen (als men de terug knop in browser gebruikt).

In dat geval lijkt DOMContentLoaded te laat. Kan dit kloppen?

- Ariën -

10-01-2026 17:09

Als ik zo lees is DOMContentLoaded eerder. Ik kan aanraden om dit als container te gebruiken.
Zodra houdt in dat, zodra de HTML geladen is, dat alles hierbinnen uitgevoerd wordt.

Guido -

11-01-2026 20:45

Je hebt inderdaad gelijk, lees ik nu.

Dit is nu mijn volledige code.
Dus formulier reset als pagina (opnieuw) geladen wordt.
En een formulier anker (scroll naar positie vh formulier).

/* Form reset */
window.addEventListener("load", function () {
	if(document.getElementById("mijn-form-id")) {
		document.getElementById("mijn-form-id").reset();
	}
});

/* Form anchor */
document.addEventListener("DOMContentLoaded", function () {
	if(document.getElementById("mijn-anchor-id")) {
		document.getElementById("mijn-anchor-id").scrollIntoView({behavior:"smooth",block:"center"});
	}
});

Wat ik nog niet begrijp is dat de reset alleen werkt met "window" en "load"? Want het formulier dat die reset staat in het "document" immers?

R Ron Kr.

16-01-2026 00:01

Wacht totdat alles (html, css, afbeeldingen, enz.) is geladen, duurt daarom (soms te) lang.

window.addEventListener("load", function () {...});

Sneller. Wacht totdat de DOM klaar is.

document.addEventListener("DOMContentLoaded", function () {...});

Nog sneller. Zet Javascript vlak boven </body>. Dan zijn alle elementen op de pagina bekend en je hebt dan geen "DOMContentLoaded" functie nodig.

Ter info: Een naamloze functie die direct wordt uitgevoerd.


(function() {
   // jouw script hier
})();

Guido -

16-01-2026 00:28

Dank voor je uitleg.

Voor mijn form reset moet ik blijkbaar wachten totdat echt alles geladen is, anders worden inputs alsnog gevuld (als ik na versturen op terug knop in browser druk). Zal vast met de POST global te maken hebben.

R Ron Kr.

17-01-2026 21:56 gewijzigd op 17-01-2026 22:00

Ik gebruik window.onload om formulier te resetten na versturen (als men de terug knop in browser gebruikt).

Als je .reset() wilt gebruiken na het navigeren (de Terug knop) dan werkt addEventListener("load" ...) niet in alle browsers goed. Je hebt te maken met de BFCache (back/forward cache). Met de volgende code werkt het wel


window.addEventListener('pageshow', function(event) {
  const form = document.getElementById("id_van_form");
  if (event.persisted) {
    form.reset();
  }
});

Dit script moet ergens onder de <form> in de html staan.

Guido -

17-01-2026 23:59

Hoi Ron,

Dank je, ik ga het uitproberen.
De versie die ik gebruikte leek prima te werken, maar alleen in de meest gebruikte browsers getest.

Reageren

Inloggen om te reageren