element weergeven of niet

Door Paul Weiss op 04-01-2024 12:13

1.456 views

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?


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>

[size=xsmall]Toevoeging op 04/01/2024 13:11:33:[/size]

Heb het probleem inmiddels kunnen oplossen. ik moet de if statement omdraaien. du als volgt dan werkt het


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>

[size=xsmall]Toevoeging op 04/01/2024 13:12:04:[/size]

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

- Ariën -

04-01-2024 18:46

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'.

P Paul Weiss

05-01-2024 15:34

hartelijk dank voor de toelichting.

Reageren

Inloggen om te reageren