1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Sichtbarkeit von Elementen

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von Nobima, 15 April 2018 um 11:14 Uhr.

  1. Nobima

    Nobima Neues Mitglied

    Registriert seit:
    Sonntag
    Beiträge:
    3
    Punkte für Erfolge:
    1
    Ich möchte mittels JavaScript einen Hinweis sichtbar bzw. nicht sichtbar machen.

    Code (text):
    1.  
    2. function ausblenden() {
    3.      document.getElementById("hinweis").style.display='none';
    4. }
    5. function einblenden() {
    6.      document.getElementById("hinweis").style.display='block';
    7. }
    Die Funktion "ausblenden" ist Ok, Wenn ich aber dann die Funktion "einblenden" aufrufe wird zwar das Element kurz angezeigt, aber dann verschwindet die ganze Webseite. Wo liegt der Fehler ?
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    471
    Punkte für Erfolge:
    28
    dafür solltest du mal deinen ganzen code zeigen weil an den code teil kann man da nur vermutungen zu sagen aber nix konkretes.

    Hier an dein Code den du gepostet hast liegt es nicht
    https://jsfiddle.net/80mvra96/4/
     
    Zuletzt bearbeitet: 15 April 2018 um 11:39 Uhr
  3. Nobima

    Nobima Neues Mitglied

    Registriert seit:
    Sonntag
    Beiträge:
    3
    Punkte für Erfolge:
    1
    Super das reproduzierbare Beispiel, vielen Dank !

    Das ist mein Code HTML:
    Code (text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    6.   <title>Meine nächste HTML/CSS Seite</title>
    7.  
    8.  
    9.   <link rel="stylesheet" href="css/Seite02css.css">
    10.  
    11.  
    12.   <!--Bootstrap auf entferntem Server -->
    13.    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    14.    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    15.    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    16.    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    17.    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    18.    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    19.  
    20.  
    21. </head>
    22.  
    23.    <script src="js/Seite02js.js"></script>
    24.  
    25. <body onload="ausblenden()">
    26.  
    27. <img id="titel" src="bilder/anmeldung.png">
    28. <img id="molekuele" src="bilder/molekuele.png">
    29. <p> Klicken Sie bitte auf Ihr<br> Geb&aumlude  bzw. auf Ihren<br> Arbeitsplatz ! </p>
    30. <ul class="bottom-nav nav nav-pills  d-flex justify-content-end fixed-bottom">
    31.       <li></li><a href="" onClick="einblenden()" class="btn btn-outline-warning btn-space" role="button">Beenden</a></li>
    32.       <li></li><a href="Nobi_Seite01.htm" class="btn btn-outline-warning btn-space" role="button">Zur&uumlck</a></li>
    33. </ul>
    34.  
    35.  
    36.  
    37. <div class="container">
    38. <div class="container">
    39.   <div class="row">
    40.     <div class="col-md-4">
    41.         <table class="table table-hover"
    42.              id="table"
    43.              data-height="400"
    44.              data-sortable = "true"
    45.         <colgroup>
    46.           <col class="col-md-3">
    47.         </colgroup>
    48.  
    49.         <thead>
    50.             <tr class="bg-primary">
    51.                <th data-field="Bezeichnung">Geb&aumlude/Arbeitsplatz</th>
    52.             </tr>
    53.         </thead>
    54.       </table>
    55.     </div>
    56.   </div>
    57. </div>
    58.  
    59. <div id = "hinweis" >
    60.       <p id="beenden">Wollen Sie das Programm wirklich beenden ? </p>
    61. </div>
    62.  
    63.  
    64. <button type="button" onclick="ajaxtransfer()">
    65. TabelleLadenZeigen</button>
    66.  
    67. </body>
    68. </html>
    69.  
    und JavaScript:
    Code (text):
    1.  
    2. var $table = $('#table');
    3. var employees = {};
    4. employees.accounting = new Array();
    5.  
    6.  
    7. //Für Anfang leeren Tabelleninhalt erzeugen
    8. for (var i = 0; i < 13; i++) {
    9.   employees.accounting.push(
    10.     {
    11.     "Bezeichnung": "",
    12.     }
    13.   );
    14. }
    15. mydata = employees.accounting;
    16.  
    17. $(function ()
    18.   {
    19.     $('#table').bootstrapTable(
    20.       {
    21.       data: mydata
    22.       }
    23.     );
    24.   }
    25. )
    26.  
    27.  
    28. function ausblenden() {
    29.      document.getElementById("hinweis").style.display='none';
    30. }
    31. function einblenden() {
    32.      document.getElementById("hinweis").style.display='block';
    33. }
    34.  
    35.  
    36. function ajaxtransfer(inhalt)
    37. {
    38.   if (window.XMLHttpRequest)
    39.   {
    40.     // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
    41.     xmlhttp = new XMLHttpRequest();
    42.   }
    43.   else
    44.   {
    45.     // AJAX mit IE6, IE5
    46.     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    47.   }
    48.  
    49.  
    50.   xmlhttp.onreadystatechange = function()
    51.   {
    52.     if (xmlhttp.readyState==4 && xmlhttp.status==200)
    53.     {
    54.       //oder mit myFunction(this) ausgegeben
    55.       myFunction(this);
    56.     }
    57.   }
    58.   xmlhttp.open("POST", "arbeitsplatz.php", true);
    59.   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    60.   xmlhttp.send("ArbPlatz=7");
    61. }
    62.  
    63. /*wird aufgerufen wenn Antwort vom Server kommt*/
    64. function myFunction(xml) {
    65.   var txt, parser, xmlDoc;
    66.   var MyXML = xml.responseText;
    67.  
    68.   //Zeilenumbruch im übertragenen String stört, deshalb entfernen:
    69.   txt = MyXML.replace(/\n/g, "");
    70.   parser = new DOMParser();
    71.   xmlDoc = parser.parseFromString(txt, "text/xml");
    72.   //Erste eckige Klammer sind die Datensätze/Knoten), zweite eckige Klammer die darunter liegenden Datensätze (kommt nicht vor)
    73.   ////alert(xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue);
    74.   //Anzahl der Datensätze:
    75.   var anzahl = xmlDoc.getElementsByTagName("Gebaeude_Id").length;
    76.   //alert(xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue);
    77.  
    78.   var employees = {};
    79.   employees.accounting = new Array();
    80.  
    81.   for (var i = 0; i < anzahl; i++) {
    82.     var temp_item = {Gebaeude_Id: xmlDoc.getElementsByTagName("Gebaeude_Id")[i].childNodes[0].nodeValue,
    83.     Bezeichnung: xmlDoc.getElementsByTagName("Bezeichnung")[i].childNodes[0].nodeValue}
    84.     employees.accounting.push(
    85.       {
    86.       "Gebaeude_Id": temp_item.Gebaeude_Id,
    87.       "Bezeichnung": temp_item.Bezeichnung
    88.       }
    89.     );
    90.  
    91.   }
    92.   mydata = employees.accounting;
    93.   $('#table').bootstrapTable("load", mydata);
    94.  
    95.   function starsSorter(a, b) {
    96.     if (a < b) return 1;
    97.     if (a > b) return -1;
    98.     return 0;
    99.   }
    100.  
     
  4. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    471
    Punkte für Erfolge:
    28
    wenn man nur den ausblend code nimmt geht es ja
    https://jsfiddle.net/2t7ocecp/10/

    Irgendwas an den anderen sachen stört da.Bin gerade mobil unterwegs und kann nicht vernünftig kucken.aber bei fiddle wir dein Code an mehreren stellen Fehlerhaft angezeigt.
    im html hast du <li> an falschen stellen geschlossen und bei den bootramp kram zeigt er auch fehler.Aber da weiß ich nicht was bei bootramp ab geht ,kann auch richtig sein.
    Ich kucke später mal genauer.
    Vieleicht kann wer anders zwischenzeitig schneller helfen,was natürlich gut wäre
     
  5. Nobima

    Nobima Neues Mitglied

    Registriert seit:
    Sonntag
    Beiträge:
    3
    Punkte für Erfolge:
    1
    Wenn ich in Deinem JsFiddle-Beispiel die Zeile

    durch meine Button-Zeile

    ersetze, wird ebenfalls die Webseite gelöscht und die Meldung

    erscheint. Also ist wohl meine Button-Zeile fehlerhaft.
     
  6. basti1012

    basti1012 Aktives Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    471
    Punkte für Erfolge:
    28
    href öffnen ja einen link .mach da doch ein p raus und mach mit iquery ein click event oder wie man das nennt
    zb
    Code (text):
    1. <p  id="einblenden" class="btn btn-outline-warning btn-space" role="button">Beenden</p>
    2.  
    3. <script>
    4. $('#hinweis').css('display','none');
    5. $('#einblenden').click(function(){
    6.      $('#hinweis').css('display','block');
    7. });  
    8. </script>
    So kannst du das onload="ausblenden() auch aus den body rausnehmen
     
    Zuletzt bearbeitet: 15 April 2018 um 17:20 Uhr