Text mit HTML anzeigen und ausblenden per Button

  • JavaScript

Es gibt 13 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    Text mit HTML anzeigen und ausblenden per Button

    Hallo, ich möchte einen versteckten text anzeigen lassen und wieder ausblenden lassen aber es funktioniert nicht so ganz...

    HTML-Quellcode

    1. <script type="text/javascript">
    2. function func1() {
    3. document.getElementById("k").innerHTML = 'Hier mein html code den ich anzeigen will !';
    4. }


    aufrufen tu ich mit :
    <input type="button" value="Liste" class="myButton" onclick="func1();">

    es funktioniert aber nicht :(

    *Topic verschoben*

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Hi,

    zum Einblenden benutze $('#id_des_elements').show();, zum Ausblenden dann $('#id_des_elements').hide();. Wenn der Button dazu da ist, um beim ersten Klick Einzublenden und beim zweiten Klick um Auszublenden (oder umgekehrt), verwende $('#id_des_elements').toggle();. jQuery Bibliothek hast du vermutlich eingebunden (?).

    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Link“ ()

    Dann lad es dir mal runter und probier ein bisschen damit rum. Es ist inzwischen Standard auf nahezu jeder Website und vereinfacht Vorhaben wie deins bzw. UI-Operationen via Javascrript ungemein.

    jquery.com/ <- Auf der Seite findest du auch eine sehr gute Doku.

    Hi,

    Okey, ich bekomms nicht hin bei mir tut sich da garnix

    Ok leider kann ich den Fehler in deinem Code nicht finden. Wobei mir gerade der Gedanke kommt dass es eventuell daran liegt dass du ja überhaupt kein Stück Code gepostet hast.

    Also gut, für dich: Kopiere folgenden Code -komplett- in eine test.html (oder wie du sie halt nennen willst) und öffne sie im Browser.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Test-Seite</title>
    6. <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    7. <style>
    9. *{
    10. box-sizing: border-box;
    11. padding: 0px;
    12. margin: 0px;
    13. }
    15. .box{
    16. padding: 32px;
    17. border: 2px solid #444444;
    18. margin: 8px;
    19. }
    21. .v1{
    22. background-color: #008a00;
    23. color: #ffffff;
    24. }
    26. #buttons{
    27. padding: 16px;
    28. }
    30. #buttons span{
    31. margin: 8px;
    32. cursor: pointer;
    33. padding: 4px;
    34. background-color: #eeeeee;
    35. }
    37. </style>
    38. </head>
    40. <body>
    42. <div id="main">
    44. <div id='buttons'>
    45. <span onClick="$('.v1').show();">Box 1 show()</span>
    46. <span onClick="$('.v1').hide();">Box 1 hide()</span>
    47. <span onClick="$('.v1').toggle();">Box 1 toggle() (klick mich mehrmals)</span>
    48. </div>
    50. <br><br>
    52. <div class="box v1" hidden>Test 1</div>
    54. </div>
    56. </body>
    58. </html>



    Link :thumbup:
    Hello World

    Hi,

    jquery falsch eingebunden

    Möglich. Gibt ja zwei Möglichkeiten, jQuery einzubinden. Einmal über URL (so wie du oben siehst) und einmal indem du die jquery.js lokal auf dem Server hast um sie dann auch über einen relativen Pfad einzubinden, z.B. ./javascript/jquery.js o.ä.

    Wenn alles passt, markiere das Thema noch als erledigt (Button "Als erledigt markieren" oder so ähnlich, ganz unten auf dieser Seite).


    Link :thumbup:
    Hello World

    HTML-Quellcode

    1. <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    3. <div id="main">
    4. <div id='myButton'>
    5. <div class="infolinestatus" id="infolinestatus">
    6. <center>
    7. <span class="myButton" onClick="$('.v1').toggle();">Stafflist</span>
    8. </div>
    9. CODE
    10. </div>
    12. </center>


    Habs nun so gelöst :) und jquery war bei mir mit \.... darum

    Piew-Keks schrieb:

    HTML-Quellcode

    1. <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    3. <div id="main">
    4. <div id='myButton'>
    5. <div class="infolinestatus" id="infolinestatus">
    6. <center>
    7. <span class="myButton" onClick="$('.v1').toggle();">Stafflist</span>
    8. </div>
    9. CODE
    10. </div>
    12. </center>

    Das ist nicht unbegingt best practice. Normalerweise nutzt man zum binden die die ready-funktion vom Dokument.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function() {
    7. $('.myButton').click(function(){
    8. $('.v1').toggle();
    9. });
    10. });
    11. </script>
    12. </head>
    13. <body>
    14. <div id="main">
    15. <div class="myButton">Click me!</div>
    16. <div class="v1">I'll toggle!</div>
    17. </div>
    18. </body>
    19. </html>


    jsbin.com/tarevatuda/1/edit?html,output

    Hi,

    @enba schon. Aber bei Inline-Scripten is mir das relativ. Wenn ich den Button sehe und anklicken kann, geh ich davon aus dass soweit alles geladen ist ^^ Geht fast schon in Richtung geschmackssache ;)

    Link :thumbup:
    Hello World

    @Link in diesem Fall schon. Sobald man aber z.B. mehrere ​MyButtons hat, spart man sich halt die Redundanz und hat eine saubere Trennung zwischen Logik und Anzeige.

    Hi,

    Sobald man aber z.B. mehrere MyButtons hat

    Also wenn wir schon bei den von dir angesprochenen "best practices" sind, sollte die ID eines Elements dokumentenweit unique sein. Somit einmalig.
    Aber ja, insofern ham wir beide recht - generell ist es besser, JS und HTML zu trennen, mache ich bei mir genauso. Und jetzt lassen wir den Thread mal in Frieden ruhen ;)

    Link :thumbup:
    Hello World

Facebook
Telefonspende