Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Pagina 1 van 2 1 2 LaatsteLaatste
Weergeven resultaten 1 tot 20 van 21

Onderwerp: Hide Show div in Javascript

  1. #1
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Vraag is niet opgelost

    Hide Show div in Javascript

    Even wat anders.
    Klopt het dat een simpele Hide-Show div (zie hier onder) niet werkt in een formulier?
    Code:
    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>

    mod. Javascript in [code] gezet met # knopje (knoppenbalk)
    Laatst aangepast door bron : 13 oktober 2021 om 23:22
    Pieter Klein, Haarlem.

  2. #2
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Waarom zou het niet werken?

    - Roep je de functie wel aan?
    - Klopt de trigger (#myDIV) wel?
    Was voorheen: PHP4U

  3. #3
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Het lijkt op deze function . Heb je de button + div in je html staan?
    Code:
    <button onclick="myFunction()">Open en sluit div</button>
    
    <div id="myDIV">
      Dit is het Div element.
    </div>
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  4. #4
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Sorry voor de late reactie.
    Ik zag het bericht niet meer waar ik het geplaatst had
    en dacht dat ik iets doms had gedaan.
    Maar het blijkt verplaatst te zijn.

    Goed, hide-show div.
    Het is een script wat ik al heel lang gebruik, maar toen ik het in een HTML form plaatste,
    wilde het niet werken. Ik heb van alles geprobeerd, maar het wilde niet lukken.
    Ik zal het zo meteen nog eens proberen. Misschien heb ik toch wat over het hoofd gezien.
    Pieter Klein, Haarlem.

  5. #5
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Ik heb maar even een proefdocument gemaakt.
    Ik hoop dat het leesbaar is.
    Volgens mij klopt alles, maar het functioneert niet!
    Ik zal dus wel wat over het hoofd zien :-(
    Ik gebruik Win10 Home met Firefox93

    HTML Code:
    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    
    <!DOCTYPE html> 
    <html lang="nl"> 
    <head>
    <meta charset="utf-8">
    <title>Database input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" type="text/css" href="../extra-filesvb/algemeen.css">
    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    </head>
    <body>
     
    <?php
    $xxx = "x00x";
    ?>
    <div class="tekst" >
     
            <form id=<?php echo $xxx;?> action="" method="get" >
              
            <br>
            <input type="text" id="voornaam<?php echo $xxx;?>" name="voornaam" value="<?php echo $xxx; ?>" size="10"> 
            <label for="index">Index:</label>
            <br>
     
    <button onclick="myFunction()">Click Me</button>        
            <br>
     
        <div id="myDIV">
                <label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
                <textarea id="omschrijving<?php echo $xxx;?>" name="omschrijving" rows="8" cols="60"> <?php echo $xxx; ?> </textarea>
     
                <br>
                <br>
     
                <label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
                Van <input type="text" id="periode0<?php echo $xxx;?>" name="periode0" value="<?php echo $xxx; ?>" size="5"> 
                Tot <input type="text" id="periode1<?php echo $xxx;?>" name="periode1" value="<?php echo $xxx; ?>" size="4">
        </div>
            <br>
            <br>
     
            
            <input type="submit" value="Bewerken"> 
            <input type="button" name="cancel" value="cancel" onclick="Terug()" >
     
            
            </form>
    </div>
    Pieter Klein, Haarlem.

  6. #6
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Probeer het eens minimalistischer, en check de console.
    Laatst aangepast door Aar : 17 oktober 2021 om 10:20
    Was voorheen: PHP4U

  7. #7
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Minimalistischer????

    Je bedoelt ook
    PHP Code:
    1
    
    <?php echo $xxx; ?>
    weglaten?

    Dan heeft het geen zin meer dit script te gebruiken, want dan zit ik met een ander probleem.
    Pieter Klein, Haarlem.

  8. #8
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Een testcase over een JS-probleem kan prima zonder PHP, en kan zelfs veel compacter. Kijk ook eens naar je stylesheet. Heb je daar geen properties instaan die conflicteren?

    Begin minimalistisch en bouw het steeds verder uit.
    Laatst aangepast door Aar : 17 oktober 2021 om 10:47
    Was voorheen: PHP4U

  9. #9
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Het navolgende werkt NIET!

    HTML Code:
    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    
    <head>
    <meta charset="utf-8">
    <title>Database input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" type="text/css" href="../extra-filesvb/algemeen.css">
    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    </head>
    <body>
     
     
            <form id="123" action="" method="get" >
              
            <br>
            <input type="text" id="voornaam123" name="voornaam" size="10"> 
            <label for="index">Index:</label>
            <br>
     
    <button onclick="myFunction()">Click Me</button>        
            <br>
     
        <div id="myDIV">
                <label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
                <textarea id="omschrijving124" name="omschrijving" rows="8" cols="60"> 124 </textarea>
     
                <br>
                <br>
     
                <label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
                Van <input type="text" id="periode0125" name="periode0" value="125" size="5"> 
                Tot <input type="text" id="periode1125" name="periode1" value="126" size="4">
        </div>
            <br>
            <br>
     
            
            <input type="submit" value="Bewerken"> 
            <input type="button" name="cancel" value="cancel" onclick="Terug()" >
     
            
            </form>

    Ook niet als je <input type="button" name="cancel" value="cancel" onclick="Terug()" > weghaalt
    Laatst aangepast door pieter53 : 17 oktober 2021 om 11:18
    Pieter Klein, Haarlem.

  10. #10
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Quote Origineel gepost door Aar Bekijk Bericht
    Kijk ook eens naar je stylesheet. Heb je daar geen properties instaan die conflicteren?
    Als ik ergens op vastloop en de fout niet in één oogopslag vind, dan debug ik altijd vanaf zeer minimalistisch punt. In dit geval zou het een simpele div met als inhoud "Boe" zijn, of iets wat lekker simpel is. Stukje bij beetje bouw je het uit, en dan zal je zien dat het wel werkt.

    Ik vermoed dat het aan je CSS ligt...
    Dit werkt prima:
    https://jsfiddle.net/8kpx79be/ (ik heb wel de form weggelaten, omdat dit een redirect in JSfiddle triggert)

    Persoonlijk zou ik de knop buiten het formulier houden, omdat de knop bedoeld is voor visuele interactie, en niet als formulier zijnde.
    Laatst aangepast door Aar : 17 oktober 2021 om 11:34
    Was voorheen: PHP4U

  11. #11
    Senior Member
    Geregistreerd
    15 december 2002
    Locatie
    Alkmaar
    Het lijkt erop dat de "Click Me" een submit als gevolg heeft en de pagina opnieuw laadt.
    Waar alles inderdaad gewoon weer zichtbaar is.

    Als de "Click Me", zoals Aar stelt, buiten de form staat werkt het wel gewoon.

    Hoop dat je er wat aan hebt.

    Frank.
    Laatst aangepast door FHG1969 : 17 oktober 2021 om 11:45

  12. #12
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Iedereen natuurlijk heel erg bedankt voor de hulp.

    Bij de oorspronkelijke vraag: "Klopt het dat een simpele Hide-Show div niet werkt in een formulier?"
    was het echter mijn bedoeling op een makkelijke manier te weten te komen of ik "Hide-Show div" wel of niet voor mijn doel kon gebruiken.
    Niets is namelijk zo irritant uren ergens mee bezig te zijn om uiteindelijk tot de conclusie te komen dat het niet kan.
    Met deze code:
    HTML Code:
    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
    28
    29
    30
    31
    32
    
    <!DOCTYPE html> 
    <html lang="nl"> 
    <head>
    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    </head>
    <body>
     
     
    <form id="123" action="../index.php" method="get" >
     
    <br>
    U mag reageren op berichten<br>
    <button onclick="myFunction()">Click Me</button><br>
    <br>
     
    <div id="myDIV">
    U mag uw berichten bewerken..<br>
    <br>
    </div>
     
    <input type="submit" value="Bewerken">  <br>
     
    </form>
    Werkt het script eigenlijk wel, maar als men op "Click me" klikt, dan is dat meteen ook een "submit".

    Wanneer men <button onclick="myFunction()">Click Me</button><br> buiten <form>....</form> plaatst, werkt het inderdaad correct.
    De knop is dan met CSS misschien wel naar de juiste positie te verplaatsen, maar ergens zint me dat niet.
    Nog maar eens een nachtje over slapen en dan een keuze maken.
    Pieter Klein, Haarlem.

  13. #13
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    het topic blijkt verplaatst te zijn.
    Nieuwe vraag, nieuw topic

    Geef de "click me" een type=button, dan werkt het.
    En het voorbeeld van w3schools vraagt om (niet zo netjes) een inline style="display:none".

    Code:
    <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    
    <style>
    /* www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show */
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    </style>
    
    </head>
    <body>
    <?php $xxx = "Piet"; ?>
    
    <div class="tekst" >
      <form id=<?php echo $xxx; ?> action="" method="get" >
        
        <br>
        <input type="text" id="voornaam<?php echo $xxx;?>" name="voornaam" value="<?php echo $xxx; ?>" size="10"> 
        <label for="index">Index:</label>
        <br>
        <button type="button" onclick="myFunction()">Toon meer...</button>        
        <br>
        
        <div id="myDIV" style="display:none">
          <label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
          <textarea id="omschrijving<?php echo $xxx; ?>" name="omschrijving" rows="8" cols="60"> <?php echo $xxx; ?> </textarea>
          <br>
          <br>
          <label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
          Van <input type="text" id="periode0<?php echo $xxx; ?>" name="periode0" value="<?php echo $xxx; ?>" size="5"> 
          Tot <input type="text" id="periode1<?php echo $xxx; ?>" name="periode1" value="<?php echo $xxx; ?>" size="4">
        </div>
        
        <br><br>
        <input type="submit" value="Bewerken"> 
        <input type="button" name="cancel" value="cancel" onclick="Terug()" >
      </form>
    </div>
    Je hebt in dit script een probleem als iemand de voornaam Pieter Jan invult.
    Overal waar dit in de id wordt gebruikt werkt het niet en zou je de hele id beter weg kunnen halen.
    Code:
    id="voornaam<?php echo $xxx;?>"
    wordt in html   :  id="voornaamPieter Jan"
    wordt voor css  :  id="voornaamPieter"
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  14. #14
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Bedankt voor de reactie.
    Inderdaad werkt de getoonde oplossing perfect.
    Zelfs als je
    HTML Code:
    1
    2
    3
    4
    
    <style>
    #myDIV { 
    }
    </style>
    gebruikt.

    Je hebt in dit script een probleem als iemand de voornaam Pieter Jan invult.
    Daar heb je gelijk in.
    In het voorbeeld staat $xxx echter voor de index van de tabel waarin de voornaam opgeslagen is.

    Nogmaals dank.
    Pieter Klein, Haarlem.

  15. #15
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Het is netter om met een class te werken zodat er geen javascript en css in de html komt te staan.
    Code:
    - Voeg deze class toe aan de css
    
    .hide {
      display: none;
    }
    
    - Verander de knop en div in de html
    
    <button id="toggle_button" type="button">Toon meer</button>
    <div id="toggle_div" class="hide">
      ( ... inhoud van div ... )
    </div>
    
    - Vervang het script door dit script
    - Zet scripts onderaan vlak boven </body> !
    
    <script>
    let ToonDivKnop = document.getElementById("toggle_button");
    ToonDivKnop.addEventListener("click", function(Event) {
      document.getElementById("toggle_div").classList.toggle("hide");
    });
    </script>
    Uitleg script
    regel 1: zet id="toggle_button" in variabele ToonDivKnop.
    regel 2: bij een "click" op de knop wordt alles wat in de function staat uitgevoerd.
    regel 3: toggle class "hide" van id "toggle_div" (verwijder 'hide' als die er is, voeg 'hide' toe als die er niet is).

    Als je javascript wilt toevoegen aan bijvoorbeeld <input type="submit" ....> maar je wilt niet dat het formulier wordt verstuurd dan kan dat met preventDefault()
    Code:
    <input id="bewerken" type="submit" value="Bewerken">
    
    <script>
    let BewerkenKnop = document.getElementById("bewerken");
    BewerkenKnop.addEventListener("click", function(Event) {
      Event.preventDefault();
      // doe iets als op knop bewerken is geclickt
    });
    </script>
    Laatst aangepast door bron : 17 oktober 2021 om 17:36
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  16. #16
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Nog een aanvulling. Hetzelfde kan natuurlijk ook met bijvoorbeeld de name="cancel" knop.
    Uit de functie onclick="Terug() begrijp ik dat je naar de vorige pagina wilt, denk ik.
    De input in de html krijgt een id die je dan in de javascript kan opvragen.
    Code:
    <input id="terug" type="button" name="cancel" value="cancel">
    Code:
    let TerugKnop = document.getElementById("terug");
    TerugKnop.addEventListener("click", function(Event) {
      window.history.back();
    });
    
    // regel 1 + 2 kan je samenvoegen, vervang de regels hierboven door
    
    document.getElementById("terug").addEventListener("click", function(Event) {
      window.history.back();
    });
    Laatst aangepast door bron : 17 oktober 2021 om 17:23
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  17. #17
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Bedankt voor alle waardevolle bijdragen.
    Ik zit nog een beetje in een ontwerpfase.
    Ik moet eigenlijk nog uitzoeken wat het beste bij de behoeften zal passen.
    Daarbij wil ik het niet al te ingewikkeld maken, want dat kan in de toekomst
    weer voor een hoop extra werk zorgen. Het is dus een kwestie van wikken en wegen.
    Pieter Klein, Haarlem.

  18. #18
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Lees niet dit hele artikel (klik) maar alleen de 1e zin.

    We like to keep languages separate, we like to keep the behavior side of things in our JavaScript, and the structural or presentational elements in our HTML.
    Vrij vertaald: structuur apart (html), vormgeving apart (css), en functionaliteit apart (javascript).

    Voordelen
    1) Achteraf geen zoekplaatje wat invloed heeft op wat.
    2) Eén stukje code kan je overal op de website gebruiken
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  19. #19
    Senior Member
    Geregistreerd
    1 januari 2007
    Locatie
    Haarlem
    Bedankt voor de tip.
    Ik hou mij (dacht ik) aan dergelijke regels.
    Alleen testbestanden vallen daar natuurlijk niet onder.

    Ik heb echter wel eens de indruk dat het met CSS zoveel wordt,
    dat je het overzicht begint te verliezen.
    Pieter Klein, Haarlem.

  20. #20
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Ik heb echter wel eens de indruk dat het met CSS zoveel wordt,
    dat je het overzicht begint te verliezen.
    Yep, bij veel verschillende onderdelen op een website zou 1000+ regels zo maar kunnen.
    Het css bestand opdelen in blokken is dan de beste manier.. In jouw voorbeeld, houdt alles over het formulier bij elkaar in het css bestand.
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl

Regels
Help

Helpmij.nl en business

Partners
Sponsoren