onClick die ID des angeklickten Divs ausgeben

[Ralf Heumann]

Hallo,

wenn ich auf eine grafik klicke die sich in einem Div befindet, möchte ich auf dieses DIV eine Funktion anwenden. Jedoch benötige ich dafür - denke ich - die ID des DIVs um mit getElementById arbeiten zu können.

Wie kann ich mir den namen den Namen der ID ausgeben lassen?

beispiel

function() {
alert( irgendwas(NAMEDESDIVS AUSGEBEN) );
}

<div id="NAMEDESDIVS"><a href="#" onClick="myFunction(this)"><img src="test.gif" alt="test"></a></div>

[Cheatah]

Hi,

wenn ich auf eine grafik klicke die sich in einem Div befindet, möchte ich auf dieses DIV eine Funktion anwenden. Jedoch benötige ich dafür - denke ich - die ID des DIVs um mit getElementById arbeiten zu können.

nein, Du benötigst lediglich eine Referenz auf das DOM-Objekt.

Wie kann ich mir den namen den Namen der ID ausgeben lassen?

Wenn Du das kannst, brauchst Du es nicht mehr.

<div id="NAMEDESDIVS"><a href="#" onClick="myFunction(this)"><img src="test.gif" alt="test"></a></div>

Du übergibst 'this', also eine Referenz auf den Link. Wenn die Struktur tatsächlich so ist, ist das <div> einfach nur das Eltern-Element, welches Du mittels DOM von 'this' ausgehend sehr leicht bekommst.

Cheatah

[Ralf Heumann]

Du übergibst 'this', also eine Referenz auf den Link. Wenn die Struktur tatsächlich so ist, ist das <div> einfach nur das Eltern-Element, welches Du mittels DOM von 'this' ausgehend sehr leicht bekommst.

müsste ich diesbezüglich mit parentNode arbeiten? :|

[Ralf Heumann]

mit parentNode sieht es etwas unschön aus.. glaube nicht dass das der richtige weg wäre, denn die Grafik befinded sich in einer Tabelle, welche in ein DIV eingefasst wird und ich denke nicht, dass:

function hideObject(element) {
  {
  hideobject = element.parentNode.parentNode.parentNode.parentNode.parentNode.tagName;
  alert(hideobject)
}
}

so ideal wäre ;)

[Axel Richter]

Hallo,

mit parentNode sieht es etwas unschön aus.. glaube nicht dass das der richtige weg wäre, denn die Grafik befinded sich in einer Tabelle, welche in ein DIV eingefasst wird und ich denke nicht, dass:

function hideObject(element) {
  {
  hideobject = element.parentNode.parentNode.parentNode.parentNode.parentNode.tagName;
  alert(hideobject)
}
}

so ideal wäre ;)

JavaScript kennt Programmschleifen. Wenn "element" Dein A-Element ist, welches irgendwo in einem DIV-Element steht, dann ermittle solange den parentNode, wie dessen nodeName NICHT "DIV" lautet. Verhindere aber, dass sich bei A-Elementen, die nicht in DIV-Elementen stehen, eine Endlosschleife ergibt.

function suchDasDIV(element) {
  while (element.nodeName != "DIV" && element.nodeName != "BODY") element=element.parentNode;
  alert(element.id);
}

viele Grüße

Axel

[Ralf Heumann]

hmm gibt es nicht einen viel leichteren Weg um lediglich eine Funktion auf den der Grafik umliegenden DIV-Container auszuführen?

ich zeige einmal explizit was meine Absicht ist:
Ich habe ein Webdesign das aussehen soll wie ein Betriebssystem. Dabei werden grafische Fenster als Divs geöffnet wie beispielsweise bei Windows.

Rechts oben habe ich mein kleines X zum Schließen des Fenster. Wenn ich auf das X klicke soll das div "style.visibility:hidden" werden.

das kleine X liegt jedoch in einer Tabelle:

<div id="Window" style="position:absolute;visibility:hidden;>
<table>
  <tr>
    <td><a href="#" onClick="hideObject(this)">
        <img src="image.gif"></a></td>
  </tr>
</table>
</div>

so wie könnte nun die Funktion aussehen, die mir das umliegende Div hidden macht? Die Funktion sollte mit "this" individuell einsetzbar sein.

Ich wüsste schon in etwa wie ich es umsetzen würde jedoch komme ich nicht darauf wie ich das umliegende DIV ansprechen kann. Gibt es nicht irgend ein Attribut welches mir dies ermittelt? Etwa in der Art:
this.parentDivContainer.style.visibility = hidden

[Cheatah]

Hi,

hmm gibt es nicht einen viel leichteren Weg

_noch_ leichter? :-)

so wie könnte nun die Funktion aussehen, die mir das umliegende Div hidden macht?

Axel hat Dir eine fertige Funktion dafür geliefert, was willst Du mehr?

Ich wüsste schon in etwa wie ich es umsetzen würde jedoch komme ich nicht darauf wie ich das umliegende DIV ansprechen kann.

Das liegt daran, dass Du Dich gedanklich vom Begriff "umliegend" trennen musst. Umliegend ist die parentNode und nichts anderes.

Cheatah

[Ralf Heumann]

Das liegt daran, dass Du Dich gedanklich vom Begriff "umliegend" trennen musst. Umliegend ist die parentNode und nichts anderes.

Ach Mist. ich hatte mir Axels Funktion nicht richtig angeschaut. ich dachte sie ermittelt lediglich die Anzahl der Schritte bis zum letzten Div, dabei ist mir der Ausdruck

alert(element.id);

ganz und gar entfallen. ;))
Nuja das dürfte es sein was ich suche. Vielen Dank :)

MFG
Ralf Heumann

[Axel Richter]

Hallo,

hmm gibt es nicht einen viel leichteren Weg um lediglich eine Funktion auf den der Grafik umliegenden DIV-Container auszuführen?

Wenn das DIV-Element (Es gibt keine DIV-Container) das Eltern-Element der Grafik ist, ja. Dann wäre es sein parentNode ;-)).

das kleine X liegt jedoch in einer Tabelle:

Eben.

<div id="Window" style="position:absolute;visibility:hidden;>

^hier soll aber der Ausgangszustand gewiss visible sein?

<table>
  <tr>
    <td><a href="#" onClick="hideObject(this)">
        <img src="image.gif"></a></td>
  </tr>
</table>
</div>

so wie könnte nun die Funktion aussehen, die mir das umliegende Div hidden macht? Die Funktion sollte mit "this" individuell einsetzbar sein.

Ich wüsste schon in etwa wie ich es umsetzen würde jedoch komme ich nicht darauf wie ich das umliegende DIV ansprechen kann. Gibt es nicht irgend ein Attribut welches mir dies ermittelt? Etwa in der Art:
this.parentDivContainer.style.visibility = hidden

Nein.

function hideObject(element) {
  while (element.nodeName != "DIV" && element.nodeName != "BODY") element=element.parentNode;
  if(element.nodeName == "DIV") element.style.visibility="hidden";
}

Was ist an zwei Zeilen Programmcode auszusetzen?

viele Grüße

Axel

[Ralf Heumann]

<div id="Window" style="position:absolute;visibility:hidden;>
                                                        ^hier soll aber der Ausgangszustand gewiss visible sein?

Durchaus. Ich hatte vergessen es zu ändern. In meinem Code ist das Fenster nämlich zuvor bereits hidden und wird per klick auf ein Icon sichtbar. nun soll es nur wieder geschlossen werden. Sorry für die schlampige schnell hingeklatsche interpretation ;))

function hideObject(element) {
  while (element.nodeName != "DIV" && element.nodeName != "BODY") element=element.parentNode;
  if(element.nodeName == "DIV") element.style.visibility="hidden";
}

Was ist an zwei Zeilen Programmcode auszusetzen?

nichts :) ich hatte nur deine Funktion nicht richtig gelesen und mir war das
alert(element.id);
nicht ins Auge gefallen, was meine Frage beantwortet hatte. Ich dachte deine Funktion zählt nur die Schritte bis zum letzten DIV

viele Grüße

Axel

Grüße zurück ;)

[wahsaga]

hi,

Ich habe ein Webdesign das aussehen soll wie ein Betriebssystem. Dabei werden grafische Fenster als Divs geöffnet wie beispielsweise bei Windows.

diese divs werden doch sicher irgendwie dynamisch erzeugt, oder?

also könntest du ihnen doch auch eine ID verpassen, und diese ID dann an der stelle

<td><a href="#" onClick="hideObject(this)">

statt this an die funktion übergeben.

dann bräuchtest du nur noch getElementById einsetzen, anstatt dich durch die objekthierarchie zu hangeln ...

gruss,
wahsaga

[Hans Thomas Vogler]

FsmE,

<div id="NAMEDESDIVS"><a href="#" onClick="myFunction(this)"><img src="test.gif" alt="test"></a></div>

In dem Fall:

function myFunction(P)
 {
   NameDesDIVS = P.parentNode.getAttribute('id')
 }

In sensibus mistis,
HaThoV