element weergeven of niet
Ik heb de onderstaande code waarbij ik een functie oproep om een element weer te geven of niet. In principe werkt het, echter de 1e keer moet ik 2 x klikken. Iemand een idee hoe dit komt?
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
Toevoeging op 04/01/2024 13:12:04:
wat ik op zich trouwens wel vreemd vind. waarom is dat?
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?
Het heeft volgens mij te maken met de display:none op de class DIV1.
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'.
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'.