De PHPhulp kroeg
Meerdere code snippets in zelfde bestand
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:
Code (php)
1
window.onload = function() {
Dat is goed zo.
Maar ik heb ook JS die niet binnen een functie valt, zoals:
Code (php)
1
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
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
document.addEventListener("DOMContentLoaded", function () {
if (document.getElementById("mijn-id")) {
// code
}
// andere Javascripts
});
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.
Gewijzigd op 08/01/2026 21:33:50 door - Ariën -
Zo ja, moet dan even nakijken of dat op tijd is voor mijn onload functie. Want ik las dat DOMContentLoaded eerder laad.
In dat geval lijkt DOMContentLoaded te laat. Kan dit kloppen?
Zodra houdt in dat, zodra de HTML geladen is, dat alles hierbinnen uitgevoerd wordt.
Dit is nu mijn volledige code.
Dus formulier reset als pagina (opnieuw) geladen wordt.
En een formulier anker (scroll naar positie vh formulier).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
/* 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"});
}
});
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?
Code (php)
1
window.addEventListener("load", function () {...});
Sneller. Wacht totdat de DOM klaar is.
Code (php)
1
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.
Code (php)
1
2
3
2
3
(function() {
// jouw script hier
})();
// jouw script hier
})();
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.
Quote:
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
Code (php)
1
2
3
4
5
6
2
3
4
5
6
window.addEventListener('pageshow', function(event) {
const form = document.getElementById("id_van_form");
if (event.persisted) {
form.reset();
}
});
const form = document.getElementById("id_van_form");
if (event.persisted) {
form.reset();
}
});
Dit script moet ergens onder de <form> in de html staan.
Gewijzigd op 17/01/2026 22:00:37 door Ron Kr.
Dank je, ik ga het uitproberen.
De versie die ik gebruikte leek prima te werken, maar alleen in de meest gebruikte browsers getest.
Heb je dit getest? Want bij mij is formulier gewoon ingevuld als ik na versturen op terug knop druk.
Heb je getElementById("....") veranderd in de id van jouw form?
Heb je een Ctrl + F5 gedaan?
De 'pageshow' triggert als een pagina wordt weergegeven bij de 1e keer én als je terug navigeert vanuit de cache.
De 'event.persisted' is true wanneer de pagina uit de browser cache wordt geladen.
Daarom kan je het inkorten tot:
Code (php)
1
2
3
2
3
window.addEventListener('pageshow', function(event) {
document.getElementById("id_van_form").reset();
});
document.getElementById("id_van_form").reset();
});
Echter, jouw nieuwe snippet werkt wél, thanks!
Dus er lijkt toch iets mis te zijn met je eerste snippet.
Als je de scripts in de html onderaan hebt staan, vlak boven </body> (best practices) dan is dit voldoende
Code (php)
1
2
3
2
3
// Form anchor
const formAnchor = document.getElementById("mijn-anchor-id");
if (formAnchor) formAnchor.scrollIntoView({behavior:"smooth",block:"center"});
const formAnchor = document.getElementById("mijn-anchor-id");
if (formAnchor) formAnchor.scrollIntoView({behavior:"smooth",block:"center"});
Gewijzigd op 20/01/2026 20:04:59 door Ron Kr.
Ron Kr. op 20/01/2026 20:03:59:
Beide snippets werken goed maar bij de laatste versie is geen if() waardoor ook bij de 1e keer laden het formulier wordt geleegd.
Het gaat mij dus vooral om het legen vh formulier als je op de terug knop in de browser drukt. Dat die ook leegt als de pagina voor het eerst laadt, prima.
Ik ga "pageshow" gebruiken omdat dit de juiste manier is. Thanks!
Gewijzigd op 24/01/2026 13:01:11 door Guido -