wie kommt man an span ran?

[Kuno]

hab folgenden Aufbau:

<div id="box"><span></span>Text</div>

Der Span-Tag enthält ein Hintergrundbild.
Wie kann ich nun mittels JavaScript diesen span-Tag ansprechen ohne dass ich ihm eine eigene ID geben muss?

Also irgendwie so:

var bluebox = document.getElementById(id).span

[Struppi]

Also irgendwie so:

var bluebox = document.getElementById(id).span

Nein, aber so:
var bluebox = document.getElementById(id).getElementsByTagName('span')[0]

Struppi.

[Kuno]

Das klingt ja schonmal richtig, blos funktionieren tuts nicht:

document.getElementById(id).getElementsByTagName('span')[0].style.display='none'

möchte das <span> nämlich unsichtbar machen.

[Struppi]

Das klingt ja schonmal richtig, blos funktionieren tuts nicht:

doch das funktioniert.

Struppi.

[kuno]

Ah stimmt, hab vergessen zu reloaden :D JavaScript ist noch ziemlich neu für mich.
Danke Euch beiden!

[Pete]

so:

var bluebox = document.getElementById(id).getElementsByTagName('span')[0]

Müssts nicht eher so heissen;
var bluebox = document.getElementsByTagName('span')[0]

[Vinzenz Mai]

Hallo

var bluebox = document.getElementById(id).getElementsByTagName('span')[0]

Müssts nicht eher so heissen;
var bluebox = document.getElementsByTagName('span')[0]

Nein. Kuno sucht das erste span-Element in einem durch seine id identifizierbaren Element, nicht das erste span-Element im ganzen Dokument.

Freundliche Grüße

Vinzenz

[Kuno]

Ok, und jetzt zu meiner anderen Frage:

<div><span id="box"></span></div>

Wie komme ich an das übergeordnete Element ran ohne dass ich hierfür eine neue ID vergeben muss?

Konkret: Wie ändere ich das div?

[Vinzenz Mai]

Hallo Kuno,

<div><span id="box"></span></div>

Wie komme ich an das übergeordnete Element ran ohne dass ich hierfür eine neue ID vergeben muss?

Konkret: Wie ändere ich das div?

Hilft Dir SELFHTML, Javascript/DOM, parentNode weiter?

Freundliche Grüße

Vinzenz

[Kuno]

das scheint mir zumindestens der richtige Ansatz zu sein.
Aber ich habe ein etwas anderes problem:

  
<ul>  
  <li id="bookmark"><a href="#" onClick="AddBookmark();"></li>  
  <li id="bookmark2"><a href="#" onClick="AddBookmark2();"></li>  
  <li id="bookmark3"><a href="#" onClick="AddBookmark3();"></li>  
</ul>  

Ich möchte jetzt jeweils in der JavaScript-Funktion ermitteln, welche ID der LI-Tag hat in dem sich die Funktion befindet und zwar ohne, dass ich den Name als Parameter übergeben muss.

Ich möchte nämlich bei Klick auf einen der Links Eigenschaften des ganzen Listenelements ändern-

[Vinzenz Mai]

Hallo Kuno,

<ul>
  <li id="bookmark"><a href="#" onClick="AddBookmark();"></li>
  <li id="bookmark2"><a href="#" onClick="AddBookmark2();"></li>
  <li id="bookmark3"><a href="#" onClick="AddBookmark3();"></li>
</ul>

  

> Ich möchte jetzt jeweils in der JavaScript-Funktion ermitteln, welche ID der LI-Tag hat in dem sich die Funktion befindet und zwar ohne, dass ich den Name als Parameter übergeben muss.  
  
warum willst Du keinen Parameter übergeben?  
  
Empfehlung 1:  
Ergänze "return false" zum [onclick](http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick)-Handler.  
Dadurch verhinderst Du, dass der (nicht vorhandene) Link angesprungen wird.  
Beachte außerdem die Schreibweise mit kleinem statt großem "c".  
  
~~~html
  
<li id="bookmark2"><a href="#" onclick="AddBookmark2(); return false;"></a></li>

Empfehlung 2:
Wozu ein a-Element? Benötigst Du hover für den IE?
Wenn nein, dann nimm doch ein beliebiges anderes Element, das ebenfalls einen
onclick-Handler hat, z.B. ein span-Element. Sorge dafür, dass auch Inhalt vorhanden ist - und schließe das Element ordentlich. Jetzt kannst Du auf
"return false;" wieder verzichten, das benötigst Du nur in einem a-Element.

  
<li id="bookmark2"><span onclick="AddBookmark2();">Klick mich</span></li>

Empfehlung 3:
Übergebe einen Parameter, z.B. einen Verweis auf das aktuelle Objekt:

  
<li id="bookmark2"><span onclick="AddBookmark2([link:http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this]);">Klick mich</span></li>

Ich möchte nämlich bei Klick auf einen der Links Eigenschaften des ganzen Listenelements ändern-

Das ist auch bei Übergabe eines Parameters möglich.

Freundliche Grüße

Vinzenz

[Kuno]

Den Link brauche ich, weil ich später in href auch eine alternative Adresse einfüge und die Seite natürlich auch ohne Javascript ufnktionieren muss. Deshalb der a-tag.

Das Problem bleibt wie gehabt bestehen.

Ich benötige die ID vom darüberliegenden Element.
Diese kann __NICHT__ als Parameter übergeben werden, da sie auf der Ajax-Zielseite nicht festgestellt und an eine andere URL weitergegeben werden kann, aber da sist an dieser Stelle auch etwas zu kompliziert.

Jedesnfalls benötige ich die ID vom li.

[Vinzenz Mai]

Hallo

Diese kann __NICHT__ als Parameter übergeben werden, da sie auf der Ajax-Zielseite nicht festgestellt und an eine andere URL weitergegeben werden kann, aber da sist an dieser Stelle auch etwas zu kompliziert.

das ist nicht besonders kompliziert. DU machst es kompliziert, weil Du es
versäumst uns Dein Konzept zu erläutern. Ich bin mir sicher, es ist im Prinzip
ganz einfach - wenn Du nur etwas besser kooperieren würdest.

Und bitte bleibe endlich mal
in Deinem Thread, statt ständig neue aufzumachen.

Grüße

Vinzenz

[Kuno]

ich hab im anderen Thread schonmal beschrieben, dass es eben NICHT MEIN KONZEPT IST!!!!! Ich habe nur Zugriff auf den LINK !!

Hier nochmal in aller deutlichkeit:

wie kann ich jetzt in Funktion() herausbekommen, welchen Wert id von li hat?
Das Problem: Ich kann nur den Link editieren. Die id ist mir unbekannt und kann im Grunde jeden beliebigen Name haben.
Ich habe ausserdem NUR Einfluss auf den Link, deshalb kann ich die id auch nicht als Parameter an Funktion() übergeben.
Ich brauche aber unbedingt innerhalb der Funktion() den id-Wert.

[Jonathan]

Hallo Kuno,

Ich brauche aber unbedingt innerhalb der Funktion() den id-Wert.

Dann übergib doch z.B. über this das li-Element an die Funktion, die dann das elternelement (und von mir aus dessen id) raussucht.

Jonathan

[Kuno]

Hallo Kuno,

Ich brauche aber unbedingt innerhalb der Funktion() den id-Wert.

Dann übergib doch z.B. über this das li-Element an die Funktion, die dann das elternelement (und von mir aus dessen id) raussucht.

Jonathan

ich versteh nur Bahnhof. Wenn ich alert(this) mache, dann krieg ich [object Window]

Wenn ich this als Parameter übergebe und im Script abfrage, dann steht da nur die Internetadresse vom Script.

[Jonathan]

Hallo Kuno,

ich versteh nur Bahnhof. Wenn ich alert(this) mache, dann krieg ich [object Window]

Dann machst du das alert(this) wahrscheinlich innerhalb einer Funktion, die im window-Objekt-definiert wurde.

So habe ich mir das vorgestellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
    <title>Test</title>  
    <script type="text/javascript">  
function bla (a) {  
  alert(a.parentNode.id);  
}  
    </script>  
  </head>  
  <body>  
    <ul>  
      <li id="bookmark">  
        <a href="#" onclick="bla(this);">Link1</a>  
      </li>  
      <li id="bookmark2">  
        <a href="#" onclick="bla(this);">Link2</a>  
      </li>  
      <li id="bookmark3">  
        <a href="#" onclick="bla(this);">Link3</a>  
      </li>  
      <li id="anderertestohnefunktion">  
        <a href="#" onclick="alert(this.parentNode.id);">Link3</a>  
      </li>  
    </ul>  
  </body>  
</html>

Aber ich versteh echt nicht, wo das Problem hier ist.

Jonathan

[Der Martin]

Hallo,

ich hab im anderen Thread schonmal beschrieben, dass es eben NICHT MEIN KONZEPT IST!!!!! Ich habe nur Zugriff auf den LINK !!

darum geht es doch nicht! Du beschreibst hier immer nur Fetzen eines Problems, anstatt das Ganze mal im Kontext zu beschreiben. Auf welche Teile dieses Ganzen du dann wirklich einen Einfluss hast, ist eine ganz andere Frage.

Das Problem: Ich kann nur den Link editieren. Die id ist mir unbekannt und kann im Grunde jeden beliebigen Name haben.
Ich habe ausserdem NUR Einfluss auf den Link, deshalb kann ich die id auch nicht als Parameter an Funktion() übergeben.

Nein, aber du kannst im Eventhandler des Links (z.B. einem onclick-Handler) mit dem Schlüsselwort this eine Referenz auf den Link selbst übergeben, von dort aus dessen parentNode, und damit die id dieses parentNode adressieren. Du hast alle Bausteine schon bekommen! Was ist denn da so kompliziert dran?

So long,
 Martin

[Kuno]

also so oder wie:

onClick="Funktion(this);"

function Funktion (referenz) {
   alert(document.referent.parentNode);
}

oder wie??

[Vinzenz Mai]

Hallo

onClick="Funktion(this);"

Nein, ohne document und ohne Tippfehler, statt

function Funktion (referenz) {
   alert(document.referent.parentNode);
}

  
function Funktion (referenz) {  
   alert(referenz.parentNode);  
}

was wieder ein Knoten im DOM-Baum ist, auf dessen id Du zugreifen kannst -
so wie es in den Links, die ich Dir in diesem Thread bereits gegeben habe, steht.

Freundliche Grüße

Vinzenz

[Kuno]

Ich wollte jetzt mal das Wissen aus den anderen Threads anwenden aber irgendwie läuft hier garnix:

  
function Funktion (referenz) {  
   document.getElementById(referenz.parentNode).style.background = '#000';  
}  

wollte jetzt spontan, um die Funktionalität zu testen, die Hintergrundfarbe des Listen-Elements (li) ändern. Aber irgendwie läuft heute echt alles schief.

[Rouven]

Hello,

wollte jetzt spontan, um die Funktionalität zu testen, die Hintergrundfarbe des Listen-Elements (li) ändern. Aber irgendwie läuft heute echt alles schief.

verwundert wenig, weil

referenz.parentNode

das hier ein Node ist, nicht eine ID (--> .id)

document.getElementById(referenz.parentNode)

und damit das hier null oder einen Fehler ergibt. Welchen Browser nutzt du eigentlich zum Entwickeln?

MfG
Rouven

[Kuno]

Firefox!

Was ist ein Node? Ich habe doch die ganze Zeit gesagt, dass ich die ID des übergeordneten Elements benötige deren name ich nicht kenne und den ich auch nicht als Parameter übergeben kann (weil ich ihn ja nicht kenne).
Soll das heissen, dass ich die ganze Zeit falsch verstanden wurde?

[Vinzenz Mai]

Hallo Kuno,

parentNode ist ein Knoten im DOM-Baum, parentNode ist _keine_ id

wie wäre es mit

function Funktion(objekt) {  
    alert(objekt.parentNode.id);  
}

[...]

<li id="foo"><a href="#" onclick="Funktion(this); return false;">Kennst Du die id meines Elternknotens?</a></li>

Was ergibt die Ausgabe?

Freundliche Grüße

Vinzenz

[Kuno]

Ups, Tippfehler: o.parentNode.id klappt. Danke :)

[Jonathan]

Hallo Kuno,

Ups, Tippfehler: o.parentNode.id klappt. Danke :)

ich vermute,du hast jetzt einen Code wie:

  
function Funktion (referenz) {  
   document.getElementById(referenz.parentNode.id).style.background = '#000';  
}  

Das wäre aber eher schwachsinig, weil du mit referenz.parentNode bereits das lement hast. Dann musst du nicht noch die id abfragen und wider das zugehörige Element suchen.

Mach einfach folgendes:

  
function Funktion (referenz) {  
   referenz.parentNode.style.background = '#000';  
}  

Eine Node ist ein Knoten im Dokument-Baum. Also z.B. ein a oder dein li. Grob gesagt, ist eine Node mehr oder weniger das gleiche wie ein Element, mit dem Unterschied dass es auch noch Textknoten und ähnliches gibt.

Jonathan

[Norbert]

<div id="box"><span></span>Text</div>
Der Span-Tag enthält ein Hintergrundbild.
Wie kann ich nun mittels JavaScript diesen span-Tag ansprechen
ohne dass ich ihm eine eigene ID geben muss?

hmm,
mach doch mal einen Vorschlag wie Du den Tag identifizieren moechtest.
Also ID nicht, das ist klar, aber was weisst Du denn sonst noch von ihm.
Merke: weisste nix - geht nix (das ist wie im Krimi).

Gruss Norbert

[Kuno]

Ich möchte das span unsichtbar machen, also display:none vergeben.

[Vinzenz Mai]

Hallo Kuno,

zum Auslesen von CSS-Eigenschaften, schau Dir bitte folgendes Archivposting an.

Freundliche Grüße

Vinzenz