gezieltes Löschen von Elementen bzw. Elementgruppen

[michael]

Hallo,

ich versuche seit mehreren Tagen ein eigenes DHTML-Menu aufzubauen. Die im Netz verwendeten Lösungen sind doch recht groß und vor allem unübersichtlich. Das sollte doch einfacher gehen...

Ein maßgebendes Problem an der Geschichte ist folgendes:
Ich fasse meine Menüstruktur in einem DIV-Block ein. Dieser ist zunächst leer. Per PHP lesen ich aus einer DB die Menüstruktur aus und bilde diese per Javascript in einem Array ab. Soweit so gut.
Das Menü wird dann, wenn die Seite geladen ist, nachträglich in den leere DIV-Block eingehängt. Die Folgemenüs werden entsprechend in den DIV-Block des entsprechenden Menüs eingehängt. Beim Anklicken (Eventhandler OnClick) läßt sich auch die erste Menüeben aus- und einklappen. Jede weitere Ebene macht Ärger. Die Ebene klappt zwar aus, wird aber sofort wieder eingeklappt, da der Eventhandler rekursiv zuschlägt (warum????).

Hier mal ein Bsp. wie es aussieht, wenn eine Menüebene ausgeklappt ist:
<div id=menu>

<div style="font-weight:normal" onClick=buildmenu(this) status="close">File</div>
  <div style="font-weight:normal" onClick=buildmenu(this) status="close">Edit</div>
  <div style="font-weight:normal" onClick=buildmenu(this) status="close">View</div>

</div>

Damit ist das Hauptmenü im DIV-Block Menü eingehängt. Jedes DIV hat ein Attribut namens Status, welches festhält, ob das Menü geöffnet oder geschlossen ist.
Wenn sich nun das Untermenü "File" öffnet sieht das so aus:
<div id=menu>

<div style="font-weight:bold" onClick=buildmenu(this) status="open">File

<div style="font-weight:normal" onClick=buildmenu(this)     status="close">Open</div>
    <div style="font-weight:normal" onClick=buildmenu(this)     status="close">Save</div>
    <div style="font-weight:normal" onClick=buildmenu(this)     status="close">Save as</div>

</div>

<div style="font-weight:normal" onClick=buildmenu(this) status="close">Edit</div>
  <div style="font-weight:normal" onClick=buildmenu(this) status="close">View</div>
</div>

Das macht das Script auch nur klappt dann auch wieder alles zusammen, da "buildmenu" rekursiv aufgerufen wird, obwohl das nicht passieren soll.
Im ersten aufruf erhalte ich das angeklickte Element, z.B. "SAVE". Die Funktion wird beendet und sofort - ohne zutun - wieder aufgerufen. Diesmal ist das Element "File" drin, usw...

Hier die dazugehörende Javascript-Funktion:
function buildmenu(item)
{ alert(item.innerHTML)
 if (item.attributes.status.value == "close")
 { item.status = "open"
  item.style.fontWeight = "bold"
  var menuitems = ""
  for (t=0;t<menu.length;t++)
  { if (menu[t]["Menuname"] == item.innerText)
   { var menuitems = menuitems + "<div onClick=buildmenu(this) status=close style='font-weight:normal;margin-left:15px'>"+menu[t]['Menuitem']+"</div>" }
  }
  item.insertAdjacentHTML("BeforeEnd", menuitems)
  return false
 }
 if (item.attributes.status.value == "open")
 {
  item.status = "close"
  item.style.fontWeight = "normal"
  var z = item.childNodes.length - 1
  for (t=0;t<z;t++)
  { var delitem = item.lastChild
   item.removeChild(delitem)
  }
  return false
 }
}

Warum zum Kuckuck stop das Teil nicht, wenn es einmal durch ist?

Vielen Dank im voraus für NÜTZLICHE!!! antworten.
Grüßle
michael

[Volker]

Hallo,

Hallo.
Vielleicht solltest du erstmal deinen Code überarbeiten und auf eine einheitliche Syntax bringen:

{ alert(item.innerHTML)

http://de.selfhtml.org/javascript/objekte/all.htm#allgemeines

item.removeChild(delitem)

http://de.selfhtml.org/javascript/index.htm

Gruß, Volker

[Michael]

Hallo,

Hallo.
Vielleicht solltest du erstmal deinen Code überarbeiten und auf eine einheitliche Syntax bringen:

{ alert(item.innerHTML)
http://de.selfhtml.org/javascript/objekte/all.htm#allgemeines

item.removeChild(delitem)
http://de.selfhtml.org/javascript/index.htm

Gruß, Volker

Wo soll da bitte etwas uneinheitlich sein?
Der Alert ist zum Debuggen da und zeigt Eingangs den Inhalt des im Moment übergebenen Elementes an.

Grüßle,
michael

[Volker]

Wo soll da bitte etwas uneinheitlich sein?
Der Alert ist zum Debuggen da und zeigt Eingangs den Inhalt des im Moment übergebenen Elementes an.

Grüßle,
michael

Geht mir um das innerHTML und die DOM-Syntax (nachzulesen bei den beiden Links).
Gruß, Volker

[Michael]

Wo soll da bitte etwas uneinheitlich sein?
Der Alert ist zum Debuggen da und zeigt Eingangs den Inhalt des im Moment übergebenen Elementes an.

Grüßle,
michael

Geht mir um das innerHTML und die DOM-Syntax (nachzulesen bei den beiden Links).
Gruß, Volker

Hallo Volker,

tut mir echt leid, aber ich kann nicht nachvollziehen wo dein Problem ist. Das Script tut letztendlich was es soll und logisch gesehen funktioniert es. Die Scripte werden auch ohne ";" am Ende verdaut und was ist bitte an den Befehl verkehrt.
Letztendlich geht es auch nicht darum, sonder es geht mir um die Frage warum der Browser (in meinem Fall der IE) die Funktion immer wieder anspringt, obwohl das Element, welches es aufgerufen hat längst weg ist.
Das Ding stoppt einfach nicht. Das ist die Frage - mach mich doch bitte hier mal schlau.

Grüßle
michael

[maglite]

Letztendlich geht es auch nicht darum, sonder es geht mir um die Frage warum der Browser (in meinem Fall der IE) die Funktion immer wieder anspringt, obwohl das Element, welches es aufgerufen hat längst weg ist.

Vielleicht geht's eben doch darum. Mir ist dein Problem schon klar, allerdings codest du mit nem Mischmach herum. Lies dir den Text der oben genannten Links zur DOM-Syntax und zum innerHTML durch.
Wenn zwei verschiedene Modelle aufeinanderprallen, muss das nicht immer in allen Browsern wie gewünscht funktionieren.

Das Ding stoppt einfach nicht. Das ist die Frage - mach mich doch bitte hier mal schlau.

Mit einem Code-Brei kann man nunmal nicht allzu viel anfangen.

Gruß, Volker

[Michael]

Na super...

wieviele Nick's hast du denn Volker?
Vielleicht kannst du das Problem doch nicht so ganz erfassen. Falls doch laß mich nicht dumm sterben.

Im übrigen habe ich mir die Links schon vor geraumer Zeit durchgelesen. Sei so lieb und zeig mir die Fehler bzw. den Mischmaschcode.... BITTE!
Vielleicht bin ich auch zu doof. Bisher habe ich immer so programmiert und das geht schon seit Jahren gut. ;-)

Nochmal für die Landwirtschaft zum Mitschreiben: das innerHTML hat überhaupt, aber auch rein überhaupt gar nix mit dem Problem zu tun. Wie denn auch; das Teil liest ja nur aus.

Ich hab mal folgendes gemacht:
Man nehme einige DIV Tags und schachtele die ineinander.
Jedem DIV Tag gibt man einen onClick=test(item) mit auf den Weg.

Die Funktion ist
function test(item)
{ alert(item.innerHTML) }

Mehr auch nicht!
... und was passiert?
Dasselbe in grün - die verflixte Funktion wird rekursiv durchlaufen. Das erkennt man super an den produzierten Alerts.
Mischmaschcode ist hier wohl nicht möglich bei einem 1-Zeiler.

Ich würde gerne einfach eine Stellungnahme dazu haben warum das so ist und wie man das abschalten kann, aber anscheinend wird hier im Moment nicht das Problem diskutiert, sondern bla getextet. Eine echte Hilfe ist das ja nicht.

Find ich echt schade...

Grüßle,
michael

[Cybaer]

Hi,

Vielen Dank im voraus für NÜTZLICHE!!! antworten.

1. Kommentiere deinen Code genau!
2. Verwende keine Methoden/Eigenschaften, die hiesige Entwickler (=Mozilla-Benutzer) überhaupt nicht testen können (innerText)
3. Verwende Standard-Syntax (getAttribute() für status-Abfrage)
4. Verzichte eigentlich ohnehin auf das STATUS-Attribut. Es ist vollkommen überflüssig. Du kannst dem jeweiligen Element mit JS direkt einen Status geben.

Gruß, Cybaer

[Michael]

Hallo zusammen,

nach einigen Tagen dummer Sucherei (ich geb so schnell nicht auf) hab ich des Rätsels Lösung!

Eure Antworten waren ja alle ach so hilfreich. Echt klasse!
Ich frage mich warum keiner von euch Cracks auf die Idee kommt mal das Stichwort "Eventbubbling" zu erwähnen. Das Ding ist nämlich für den Schlammassel verantwortlich. Danke - bin selbst draufgekommen.

Die Nettigkeiten von wegen wie ist der Code zu schreiben, rummäkeln an Programmierstilen (möchte mal eure codes sehen) und anderes unnützes Zeug (siehe Antworten) find ich in einem solchen Forum nicht sonderlich angebracht. Ich habe auch ein paar andere Threads durchgelesen, in welchen auch so neunmalklug dahergeredet wird. Eine echte Hilfe hab ich selten Entdecken können.

So nun mal zum Problem selbst, damit andere daran teilhaben können:
geschachtelte Elemente (z.B. DIV, SPAN,...) mit einem Eventhandler geben den Event immer von innen nach außen (zumindest beim IE) weiter, solange bis kein Eventhandler mehr da ist - dann bricht das ganze erst ab. Findet sich so in den tiefen von SelfHTML.
Also setzt man den Handler auf die oberste Ebene an und holt sich das auslösende Element über window.event.srcElement.id, vorausgesetzt jedes darunterliegende Element hat eine ein-eindeutige ID. Aber das sollte der Ordnung halber schon sein. ;-)
Mit diesem "Trick" ist es nun leicht das auslösende Element per ID herauszupicken und die Funktion wird nur einmal aufgerufen. Das ist das was ich wollte. Nicht mehr und nicht weniger. Ich frage mich echt warum man deswegen so ein gezappel macht und nicht einfach Klartext redet??????? *grmpf*

Im übrigen: bei Tabellen mit Eventhandler gibt es anscheinend kein Eventbubbling. Sowas nennt sich dann einheitlich Definition von Verhaltensweisen.

Grüßle
michael

[Ashura]

Hallo Michael.

Ich frage mich warum keiner von euch Cracks auf die Idee kommt mal das Stichwort "Eventbubbling" zu erwähnen.

Weil die meisten keine Ahnung davon haben. Der einzige, der mir in den Sinn kommt, welcher darauf hätte hingewiesen, ist molily.

Einen schönen Montag noch.

Gruß, Ashura

[michael]

Vielen Dank Ashura,

das ist doch einmal eine klare Aussage.
Ich bin wirklich überrascht, daß es auch Leute gibt die ehrlich sind und sich nicht selber in den Himmel hochloben. Ich denke es ist keine Schande zu sagen: da habe ich leider keine Ahnung.

Grüßle
michael

[Cybaer]

Hi,

Eure Antworten waren ja alle ach so hilfreich. Echt klasse!
Ich frage mich warum keiner von euch Cracks auf die Idee kommt mal das Stichwort "Eventbubbling" zu erwähnen.

Eventbubbling? Jeder "JS-Crack" hier dürfte damit etwas anfangen können. Aber Du glaubst echt im Ernst, daß "Cracks" sich die absolut unproduktive, überflüssige Mühe machen, einen Code überhaupt zu lesen, dessen Poster (der ja immerhin von *uns* etwas haben möchte: nämlich Hilfe) nicht in der Lag^W^W^W willens ist, unter https://forum.selfhtml.org/?t=133042&m=862236 genannte Punkte abzustellen? Du meinst also, wir sollen in irgendwelchem Code rumraten, den wir ggf. nicht ausprobieren können, nur weil Du faul bist das Mindestmaß an Entgegenkommen zu bringen, das ein Hilfesuchender tun sollte? Jungchen, geh sterben ... =:->

Gruß, Cybaer