Content aan button toevoegen
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)
1
2
3
4
5
6
7
8
9
10
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>
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
Ik zie dat ik
Code (php)
1
getElementsById
Code (php)
1
getElementById
Guido
Code (php)
1
window.addEventListener('DOMContentLoaded', function() { /* ... */ });
De functie 'click' heb je al, dus je zou binnen die functie iets kunnen doen als:
Code (php)
1
2
3
4
5
6
7
8
9
10
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 = '-';
}
});
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 = '-';
}
});
Code (php)
1
window.addEventListener('DOMContentLoaded', function() {
Guido
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)
1
2
3
4
5
6
7
8
9
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() {
});
});
// eerste functie
menu-toggle.addEventListener('click', function() {
});
// tweede functie
submenu-toggle.addEventListener('click', function() {
});
});
Guido
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)
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
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('DOMContentLoaded', init = function() {
alert('Ping en klaar!');
});
</script>
</head>
<body>
<button onclick="init();">INIT</button>
</body>
</html>
<html>
<head>
<script>
window.addEventListener('DOMContentLoaded', init = function() {
alert('Ping en klaar!');
});
</script>
</head>
<body>
<button onclick="init();">INIT</button>
</body>
</html>