element weergeven of niet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
style>
.DIV1{
display: none;
}
</style>
<button onclick="myFunction()">Click Me</button>
<div class="DIV1" id="DIV1">
Hier wat tekst
</div>
<script>
function myFunction() {
// var x = document.getElementById("myDIV");
var x = document.getElementsByClassName('DIV1')[0];
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
.DIV1{
display: none;
}
</style>
<button onclick="myFunction()">Click Me</button>
<div class="DIV1" id="DIV1">
Hier wat tekst
</div>
<script>
function myFunction() {
// var x = document.getElementById("myDIV");
var x = document.getElementsByClassName('DIV1')[0];
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Toevoeging op 04/01/2024 13:11:33:
Heb het probleem inmiddels kunnen oplossen. ik moet de if statement omdraaien. du als volgt dan werkt het
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
style>
.DIV1{
display: none;
}
</style>
<button onclick="myFunction()">Click Me</button>
<div class="DIV1" id="DIV1">
Hier wat tekst
</div>
<script>
function myFunction() {
// var x = document.getElementById("myDIV");
var x = document.getElementsByClassName('DIV1')[0];
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
.DIV1{
display: none;
}
</style>
<button onclick="myFunction()">Click Me</button>
<div class="DIV1" id="DIV1">
Hier wat tekst
</div>
<script>
function myFunction() {
// var x = document.getElementById("myDIV");
var x = document.getElementsByClassName('DIV1')[0];
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Toevoeging op 04/01/2024 13:12:04:
wat ik op zich trouwens wel vreemd vind. waarom is dat?
Wanneer de pagina laadt, wordt de DIV1 standaard verborgen omdat je dit doet: .DIV1 { display: none; }. Wanneer je voor het eerst op de knop klikt, wordt de display van de DIV1 gewijzigd van "none" naar "block", waardoor de tekst wordt weergegeven.
Dit betekent dat de eerste klik de stijl van "none" naar "block" verandert, en vervolgens zal elke volgende klik switchen tussen 'block' en 'none'.