Gunnar Bittersmann: Tabelle mit 1 Butten ein-/ausblenden

Beitrag lesen

SELF-Forum

Tabelle mit 1 Butten ein-/ausblenden

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@Bernd:

nuqneH

So sieht der Quelltext aus:
<html>

Davor fehlt <!DOCTYPE html>, um den Quirksmodus zu verhindern.

<head>
  <title>Tabelle ein-/ausblenden</title>
  <script type="text/javascript">

type="text/javascript" ist in HTML5 überflüssig. Scripte sollten besser nicht im head stehen (bzw. eingebunden werden), sondern am Ende des body, um das Rendern der Seite nicht zu blocken. Das verbietwt dann natürlich die Verwendung von document.write(). Was nicht tragisch ist, da man Inhalte mit DOM-Methoden oder innerHTML auf die Seite (ins DOM) bekommt.

function schreibeTabelle ()

Warum wird die Tabelle eigentlich mit JavaScript erzeugt und steht nicht im HTML?

function einaus ()
  {
  var = " ";
  if (document.getElementById('Tabelle').style.display = "block")
    Fall = "1";
  if (document.getElementById('Tabelle').style.display = "none")
    Fall = "2";

Zu dem Vergleichsoperator hat sich molily ja schon geäußert.

Ein weiterer Fehler ist, dass du Fall als globale Variable verwendest. Das sollte man unbedingt vermeiden. Vielleicht wolltest du das mit der Zeile var Fall = " "; ursprünglich tun, aber dir sind die Fälle davongeschwommen. (5€ in die Wortwitzkasse.) var Fall; ohne Wertzuweisung hätte genügt.

Außerdem solltest du unbedingt geschweifte Klammern setzen, auch wenn nur eine Anweisung im if-Zweig steht. Das ist sonst eine üble Fehlerquelle. Ich sag nur goto fail;

switch (Fall)
    {
    case "1":
      document.getElementById('Tabelle').style.display = "none";
      break;
    case "2":
      document.getElementById('Tabelle').style.display = "block";
      break;
    }
  }

Das ganze Konstrukt, erst Fall zu setzen und dann für switch zu verwenden, ist aber überflüssig. Die Anweisungen aus case können doch direkt in den if-Zweigen stehen:

function einaus()  
{  
  if (document.getElementById('Tabelle').style.display == "block")  
  {  
    document.getElementById('Tabelle').style.display = "none";  
  }  
  if (document.getElementById('Tabelle').style.display == "none")  
  {  
    document.getElementById('Tabelle').style.display = "block";  
  }  
}

Da aber nur die 2 Werte "block" und "none" im Spiel sind, kann man sich die 2. Abfrage sparen und else verwenden:

function einaus()  
{  
  if (document.getElementById('Tabelle').style.display == "block")  
  {  
    document.getElementById('Tabelle').style.display = "none";  
  }  
  else  
  {  
    document.getElementById('Tabelle').style.display = "block";  
  }  
}

Was sich http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben ließe:

function einaus()  
{  
  document.getElementById('Tabelle').style.display = (document.getElementById('Tabelle').style.display == "block") ? "none" : "block";  
  }  
}

Es ist aber nicht sinnvoll, bei jedem Aufruf der Funktion das Element erneut aus dem DOM herauszusuchen. Das tut man einmal und speichert es in einer Variablen:

var tableElement = document.getElementById('Tabelle');  
  
function einaus()  
{  
  if (tableElement.style.display == "block")  
  {  
    tableElement.style.display = "none";  
  }  
  else  
  {  
    tableElement.style.display = "block";  
  }  
}

bzw.

var tableElement = document.getElementById('Tabelle');  
  
function einaus()  
{  
  tableElement.style.display = (tableElement.style.display == "block") ? "none" : "block";  
  }  
}

Oder man übergibt es als Parameter. Dann ließe sich die Funktion einaus() auch für andere Elemente verwenden:

var tableElement = document.getElementById('Tabelle');  
  
function einaus(element)  
{  
  element.style.display = (element.style.display == "block") ? "none" : "block";  
  }  
}

Aufruf dann nicht mit einaus(), sondern einaus(tableElement).

Wie Der Martin schon sagte, ist es aber besser, style-Eigenschaften NICHT mit JavaScript zu ändern, sondern Zustände durch Änderungen im DOM (bspw. durch Klassenzugehörigkeiten) umzusetzen. Siehe http://forum.de.selfhtml.org/archiv/2010/7/t199119/#m1338839.

Wie’s gemacht wird, siehe http://forum.de.selfhtml.org/archiv/2014/1/t216394/#m1483795.

Qapla'

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
Beitrag melden
–
Informationen zu den Bewertungsregeln