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

Frage Gleiche Funktion nutzen um unterschiedliche Divs auszuklappen - Wie?

Wannabe-CSS

Neues Mitglied
Hallo,

ich bin in Sachen JavaScript noch blutiger Anfänger und habe deshalb eine vermutlich sehr dumme Frage (Habe aber mit Google leider keine Lösung finden können - Wohl weil mir die richtigen Begriffe fehlen).

Folgende Ausgangssituation:
Ich habe unterschiedliche Buttons. Durch drücken der jeweiligen Buttons soll jeweils ein anderer DIV sichtbar werden. Nun könnte ich natürlich für jeden einzelnen Button eine eigene Funktion hinterlegen. Aber geht das nicht auch "cleaner"? Wie kann ich also eine Funktion erstellen, die sich auf Grundlage des gedrückten Buttons selbst anpasst?

Meine Gedanken:
Bisher hab ich versucht in die Funktion eine if-Abfrage zu packen, die dann die folgende Funktionalität entsprechend anpasst.
Zur Verdeutlichung mal ein Code-Schnipsel (Der nicht funktioniert, aber hoffentlich näher bringt, wie ich das meine):

Code:
<button id="firstButton" onclick="openDiv()">Open div1</button>
<button id="secondButton" onclick="openDiv()">Open div2</button>
<button id="thirdButton" onclick="openDiv()">Open div3</button>

<div id="div1" style="width:50px; height:50px; display:none;"></div>
<div id="div2" style="width:50px; height:50px; display:none;"></div>
<div id="div3" style="width:50px; height:50px; display:none;"></div>


<script>
function openDiv(){
     if(document.getElementById().id=="firstButton"){
          var x = document.getElementById("div1");
     }else if(document.getElementById().id=="secondButton"){
          var x = document.getElementById("div2");
     }else{
          var x = document.getElementById("div3");
    }

     if (x.style.display === "none") {
          x.style.display = "block";
     } else {
          x.style.display = "none";
     }

}
</script>

Was ich mit Zeile 13 und 15 erreichen möchte: "Wenn der Button mit der ID "firstButton" (bzw. "secondButton") gedrückt wurde, dann ..."
Nun, so wie der Code dasteht funktioniert das aber nicht. Was muss ich ändern?

Ich hoffe ich konnte einigermaßen verständlich mein Problem vermitteln und ihr wisst, was ich meine :D

Danke schon jetzt für eure Hilfe!
 
Werbung:
Wenn du eine Beziehung zwischen dem Button und dem korrespondierendem Div herstellst, lässt sich die Funktion abstrahieren, und falls es außerdem noch kurz sein soll, nimm jQuery.

HTML:
 . <div>
    <button class="btn" id="first">Eins</button>
    <button class="btn" id="second">Zwei</button>
    <button class="btn" id="third">Drei</button>
  </div>
  <div class="hidden first">Div 1</div>
  <div class="hidden second">Div 2</div>
  <div class="hidden third">Div 3</div>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <script>
  $('.btn').on('click', function() {
    $('.hidden').hide();
    $('.' + this.id).show();
  });
  </script>
 
Zurück
Oben