element weergeven of niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

04/01/2024 12:13:12
Quote Anchor link
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?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
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>


Toevoeging op 04/01/2024 13:12:04:

wat ik op zich trouwens wel vreemd vind. waarom is dat?
 
PHP hulp

PHP hulp

30/05/2024 08:54:52
 
- Ariën  -
Beheerder

- Ariën -

04/01/2024 18:46:42
Quote Anchor link
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'.
 
Paul Weiss

Paul Weiss

05/01/2024 15:34:47
Quote Anchor link
hartelijk dank voor de toelichting.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.