Div-Element mit Klick ein- & ausblenden. Klick merken?

sbroecking

Grünschnabel
Hallo und guten Morgen zusammen,

ich möchte gerne einen Bereich auf meiner Seite durch einen Klick auf einen Button ein- und ausblenden lassen können. Das Funktioniert soweit auch schon.

Leider macht es aktuell noch wenig Sinn, da der Klick nicht gespeichert wird. Heißt wenn ich als Besucher den Bereich ausblende und dann im Menü herumklicke wird der Bereich immer wieder eingeblendet.

Ich habe bereits was von Cookies oder Session Storage gelesen, leider weiß ich echt nicht wie ich die Funktion zum Merken des Klicks in meine jetzige Funktion einbauen kann?

Wäre klasse, wenn mir jemand weiter helfen kann.

Mein aktuelles Script sieht wie folgt aus:
Im head Bereich:

Code:
<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(element){
if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
else
       document.getElementById(element).style.display = 'none';
}

//-->
</script>

Im Body Bereich:
Code:
<div id="toggle" style="display:block;">
Bereich zum Ein- und Ausblenden
</div>

<a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:10px;">Klick</a>
 
Hier mal eine wiederverwendbare Funktion:
Javascript:
function storageHandler (storageEngine) {
  return function keyHandler(key, globalDefaultValue) {
    return {
      set: function (value) {
        var str = value.toString();
        storageEngine.setItem(key, str);
        return str;
      },
      get: function (defaultValue) {
        var def = (typeof defaultValue !== "undefined") ? defaultValue : globalDefaultValue;
        var value = storageEngine.getItem(key);
        return (value == null) ? def : value;
      }
    };
  }
}

So würdest du sie nutzen:
Javascript:
var divDisplaySetting = storageHandler('localStorage').keyHandler('divDisplay', 'block');
document.getElementById(element).style.display = divDisplaySetting.get();

function toggleDiv(element) {
  if(document.getElementById(element).style.display == 'none') {
    document.getElementById(element).style.display = divDisplaySetting.set('block');
  }
  else {
      document.getElementById(element).style.display = divDisplaySetting.set('none');
  }
}
Idealerweise würdest du die Referenz auf das DOM-Objekt #element am Anfang der Funktion zwischenspeichern.
 
@ComFreek
Wenn du einen typensichern Vergleich machst, sollte es reichen, auf den Datentyp undefined zu prüfen - du könntest dann auf den Stringvergleich mit typeof verzichten.
Javascript:
var def = (defaultValue !== undefined) ? defaultValue : globalDefaultValue;
Oder noch besser auf undefined zu prüfen:
Javascript:
var def = (defaultValue === undefined) ? globalDefaultValue : defaultValue;

Ansonsten eine sehr ansprechende Lösung!

Ciao
Quaese
 
Wenn du einen typensichern Vergleich machst, sollte es reichen, auf den Datentyp undefined zu prüfen - du könntest dann auf den Stringvergleich mit typeof verzichten.
Vor ES 5 konnte man den Wert von undefined abändern. Auch wenn solch eine Änderung eigentlich niemals vertretbar gewesen ist, hat sich das typeof-Konstrukt bei mir irgendwie eingeprägt. Aber du hast recht, ich sollte mir das mal abgewöhnen!

Beim zweiten Punkt gebe ich dir auch recht, es ist ein bisschen flüssiger zu lesen.
Dabei fällt mir auf, dass man idealerweise auf arguments.length prüfen müsste, denn es könnte ja vorkommen, dass jemand undefined als Standard-Wert haben möchte.
 
Guten Morgen, vielen Dank schon einmal für eure Hilfe.
Ich beherrsche JS leider wirklich nicht, habe das jetzt mal so eingefügt, wie ich das verstanden habe, aber leider passiert dann nichts mehr, wenn man auf den "Button" klickt. -.-

Das im head:
Code:
<script language="JavaScript" type="text/javascript">

var divDisplaySetting = storageHandler('localStorage').keyHandler('divDisplay', 'block');
document.getElementById(element).style.display = divDisplaySetting.get();
function toggleDiv(element) {
  if(document.getElementById(element).style.display == 'none') {
    document.getElementById(element).style.display = divDisplaySetting.set('block');
  }
  else {
      document.getElementById(element).style.display = divDisplaySetting.set('none');
  }
}

</script>

Im Body habe ich nichts verändert.
Habe ich das einfach falsch verstanden oder wo liegt mein Fehler?

Beste Grüße aus Wesel
 
Code:
Uncaught ReferenceError: storageHandler is not defined
http://www.druckundso.de/initial Failed to load resource: the server responded with a status of 404 (Beitrag nicht gefunden)
13www.druckundso.de/:1035 Uncaught TypeError: Cannot read property 'set' of undefined
http://www.druckundso.de/ Failed to load resource: net::ERR_CACHE_MISS
 
Also ich bin in Java wirklich unwissend. Ist eigentlich das erste Mal das ich mich damit beschäftige und bin ja schon froh, das es fertige Sachen gibt.

Was meinst du mit davor eingefügt? Soll es dann so aussehen?
Code:
<script language="JavaScript" type="text/javascript">
<!--

var divDisplaySetting = storageHandler('localStorage').keyHandler('divDisplay', 'block');
document.getElementById(element).style.display = divDisplaySetting.get();
function toggleDiv(element) {
  if(document.getElementById(element).style.display == 'none') {
    document.getElementById(element).style.display = divDisplaySetting.set('block');
  }
  else {
      document.getElementById(element).style.display = divDisplaySetting.set('none');
  }
}

function toggleDiv(element){
if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>

Wenn ich das script so einfüge, klappt das ein und ausblenden zwar wieder, aber der Klick wird nicht gespeichert. :(
 
Zurück