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>
 

ComFreek

Mod | @comfreek
Moderator
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.
 

Quaese

Moderator
Moderator
@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
 

ComFreek

Mod | @comfreek
Moderator
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.
 

sbroecking

Grünschnabel
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
 

sbroecking

Grünschnabel
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
 

sbroecking

Grünschnabel
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. :(
 

sbroecking

Grünschnabel
hm, also irgendwie weiß ich nicht genau wie ich das jetzt machen soll.

wenn ich das wie folgt mache:
Code:
<script language="JavaScript" type="text/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;
      }
    };
  }
}


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>

bekomme ich folgende Fehler:
Code:
 Uncaught TypeError: undefined is not a function

http://www.druckundso.de/initial Failed to load resource: the server responded with a status of 404 (Beitrag nicht gefunden)
www.druckundso.de/:1063 Uncaught TypeError: Cannot read property 'set' of undefined
http://www.druckundso.de/ Failed to load resource: net::ERR_CACHE_MISS


Das du es selbst geschrieben hast find ich dann noch besser :) für mich ist es ja dennoch was "fertiges" ;)
 

ComFreek

Mod | @comfreek
Moderator
Oh, das war ein Fehler in meinem Code.
Ändere einfach folgende Zeile ab:
Javascript:
var divDisplaySetting = storageHandler('localStorage').keyHandler('divDisplay', 'block');
zu
Javascript:
var divDisplaySetting = storageHandler('localStorage')('divDisplay', 'block');

PS: Das nächste Mal die Zeilennummer bei der Fehlermeldung bitte mit kopieren, dann braucht man nicht rumraten ;)
 
Zuletzt bearbeitet:

Forum-Statistiken

Themen
272.363
Beiträge
1.558.641
Mitglieder
187.837
Neuestes Mitglied
Kalle P