Sichtbarkeit von Elementen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Nobima

Neues Mitglied
15 April 2018
3
0
1
62
#1
Ich möchte mittels JavaScript einen Hinweis sichtbar bzw. nicht sichtbar machen.

Code:
function ausblenden() {
     document.getElementById("hinweis").style.display='none';
}
function einblenden() {
     document.getElementById("hinweis").style.display='block';
}
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 ?
 

Nobima

Neues Mitglied
15 April 2018
3
0
1
62
#3
Super das reproduzierbare Beispiel, vielen Dank !

Das ist mein Code HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Meine nächste HTML/CSS Seite</title>


  <link rel="stylesheet" href="css/Seite02css.css">


  <!--Bootstrap auf entferntem Server -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>


</head>

   <script src="js/Seite02js.js"></script>

<body onload="ausblenden()">

<img id="titel" src="bilder/anmeldung.png">
<img id="molekuele" src="bilder/molekuele.png">
<p> Klicken Sie bitte auf Ihr<br> Geb&aumlude  bzw. auf Ihren<br> Arbeitsplatz ! </p>
<ul class="bottom-nav nav nav-pills  d-flex justify-content-end fixed-bottom">
      <li></li><a href="" onClick="einblenden()" class="btn btn-outline-warning btn-space" role="button">Beenden</a></li>
      <li></li><a href="Nobi_Seite01.htm" class="btn btn-outline-warning btn-space" role="button">Zur&uumlck</a></li>
</ul>



<div class="container">
<div class="container">
  <div class="row">
    <div class="col-md-4">
        <table class="table table-hover"
             id="table"
             data-height="400"
             data-sortable = "true"
        <colgroup>
          <col class="col-md-3">
        </colgroup>

        <thead>
            <tr class="bg-primary">
               <th data-field="Bezeichnung">Geb&aumlude/Arbeitsplatz</th>
            </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<div id = "hinweis" >
      <p id="beenden">Wollen Sie das Programm wirklich beenden ? </p>
</div>


<button type="button" onclick="ajaxtransfer()">
TabelleLadenZeigen</button>

</body>
</html>
und JavaScript:
Code:
var $table = $('#table');
var employees = {};
employees.accounting = new Array();


//Für Anfang leeren Tabelleninhalt erzeugen
for (var i = 0; i < 13; i++) {
  employees.accounting.push(
    {
    "Bezeichnung": "",
    }
  );
}
mydata = employees.accounting;

$(function ()
  {
    $('#table').bootstrapTable(
      {
      data: mydata
      }
    );
  }
)


function ausblenden() {
     document.getElementById("hinweis").style.display='none';
}
function einblenden() {
     document.getElementById("hinweis").style.display='block';
}


function ajaxtransfer(inhalt)
{
  if (window.XMLHttpRequest)
  {
    // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
    xmlhttp = new XMLHttpRequest();
  }
  else
  {
    // AJAX mit IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }


  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      //oder mit myFunction(this) ausgegeben
      myFunction(this);
    }
  }
  xmlhttp.open("POST", "arbeitsplatz.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("ArbPlatz=7");
}

/*wird aufgerufen wenn Antwort vom Server kommt*/
function myFunction(xml) {
  var txt, parser, xmlDoc;
  var MyXML = xml.responseText;

  //Zeilenumbruch im übertragenen String stört, deshalb entfernen:
  txt = MyXML.replace(/\n/g, "");
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
  //Erste eckige Klammer sind die Datensätze/Knoten), zweite eckige Klammer die darunter liegenden Datensätze (kommt nicht vor)
  ////alert(xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue);
  //Anzahl der Datensätze:
  var anzahl = xmlDoc.getElementsByTagName("Gebaeude_Id").length;
  //alert(xmlDoc.getElementsByTagName("Name")[0].childNodes[0].nodeValue);

  var employees = {};
  employees.accounting = new Array();

  for (var i = 0; i < anzahl; i++) {
    var temp_item = {Gebaeude_Id: xmlDoc.getElementsByTagName("Gebaeude_Id")[i].childNodes[0].nodeValue,
    Bezeichnung: xmlDoc.getElementsByTagName("Bezeichnung")[i].childNodes[0].nodeValue}
    employees.accounting.push(
      {
      "Gebaeude_Id": temp_item.Gebaeude_Id,
      "Bezeichnung": temp_item.Bezeichnung
      }
    );

  }
  mydata = employees.accounting;
  $('#table').bootstrapTable("load", mydata);

  function starsSorter(a, b) {
    if (a < b) return 1;
    if (a > b) return -1;
    return 0;
  }
 

basti1012

Aktives Mitglied
26 November 2017
690
62
28
37
Minden
chat.sebastian1012.bplaced.net
#4
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
 

Nobima

Neues Mitglied
15 April 2018
3
0
1
62
#5
Wenn ich in Deinem JsFiddle-Beispiel die Zeile

<input type="button" onclick="einblenden()" value="Einblenden">
durch meine Button-Zeile

<a href="" onClick="einblenden()" class="btn btn-outline-warning btn-space" role="button">Beenden</a>
ersetze, wird ebenfalls die Webseite gelöscht und die Meldung

erscheint. Also ist wohl meine Button-Zeile fehlerhaft.
 

basti1012

Aktives Mitglied
26 November 2017
690
62
28
37
Minden
chat.sebastian1012.bplaced.net
#6
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:
<p  id="einblenden" class="btn btn-outline-warning btn-space" role="button">Beenden</p>

<script>
$('#hinweis').css('display','none');
$('#einblenden').click(function(){
     $('#hinweis').css('display','block');
});  
</script>
So kannst du das onload="ausblenden() auch aus den body rausnehmen
 
Zuletzt bearbeitet: