JS Funktion soll erkennen, welches li im Nav angeklickt wurde

[hmm]

Hi Leute,

ich habe in meinem HTML Code einen Nav Bereich, welcher zunächst leer ist. Eine JS Funktion befüllt diesen Nav Bereich mit einzelnen li Elementen und fügt jedem dieser li Elemente das OnClick-Event "testFunktion();" zu.

Wie muss ich die testFunktion() schreiben, damit mir diese per console.log ausgeben kann, welches li Element angeklickt wurde?

[dedlfix]

Tach!

ich habe in meinem HTML Code einen Nav Bereich, welcher zunächst leer ist. Eine JS Funktion befüllt diesen Nav Bereich mit einzelnen li Elementen und fügt jedem dieser li Elemente das OnClick-Event "testFunktion();" zu.

Dann gib lieber dem übergeordneten ul einen einzelnen Handler statt vielen Elementen jeweils denselben oder genauer gesagt, je einen mit derselben Funktionalität zuzuweisen. Events bewegen sich per Bubbling zu den Vorfahrenelementen nach oben und können auch dort behandelt werden.

Wie muss ich die testFunktion() schreiben, damit mir diese per console.log ausgeben kann, welches li Element angeklickt wurde?

Jede Eventhandler-Funktion bekommt ein Event-Objekt übergeben. Darin gibt es auch eine Eigenschaft, die auf das auslösende Element zeigt. Mit console.log() kannst du dir das Event-Objekt anschauen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Wie muss ich die testFunktion() schreiben, damit mir diese per console.log ausgeben kann, welches li Element angeklickt wurde?

Jede Eventhandler-Funktion bekommt ein Event-Objekt übergeben. Darin gibt es auch eine Eigenschaft, die auf das auslösende Element zeigt.

Es fehlt der Hinweis, dass li-Elemente nicht geeignet sind, click-Events auszulösen.

LLAP 🖖

[Matthias Apsel]

Hallo hmm,

ich habe in meinem HTML Code einen Nav Bereich, welcher zunächst leer ist. Eine JS Funktion befüllt diesen Nav Bereich mit einzelnen li Elementen und fügt jedem dieser li Elemente das OnClick-Event "testFunktion();" zu.

zudem was dedlfix schrieb: Attribute, die mit on beginnen, sollten vermieden werden. Du solltest unter https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event eine ganze Menge finden, was für die Beantwortung deiner Frage von Nutzen sein könnte. Auch das angesprochene bubbling.

Bis demnächst
Matthias

[hmm]

danke. aktuell hab ichs so:

<li onClick="focusTeam(this.id);" id="team2"><a href="#">Controling Team</a></li>

    function focusTeam(id) {
        console.log(id);
        var centerTabs = document.querySelector('#centerBereich');
        document.getElementById('skillmatrix').appendChild(centerTabs);
    };

href ist quatsch und das mit onClick bau ich besser aus?

[Gunnar Bittersmann]

@@hmm

<li onClick="focusTeam(this.id);" id="team2"><a href="#">Controling Team</a></li>

    function focusTeam(id) {
        console.log(id);
        var centerTabs = document.querySelector('#centerBereich');
        document.getElementById('skillmatrix').appendChild(centerTabs);
    };

href ist quatsch

Wenn du zum Seitenanfang springen willst, ist href="#" goldrichtig. In allen anderen Fällen ist es Quatsch, ja.

Was soll bei deiner „Navigation“ passieren? Jeweils an anderer Tab wird angezeigt?

Wenn du Tabs willst, willst du Tabs.

LLAP 🖖

[hmm]

ich hab unten geschrieben was passieren soll. Hier der aktuelle Code des Templates (hauptsächlich Platzhalter die ebenfalls per JavaScript befüllt werden):

    <template id="centerBereich">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#sectionA">Skillmatrix</a></li>
            <li><a data-toggle="tab" href="#sectionB">Skills</a></li>
            <li><a data-toggle="tab" href="#sectionC">Benutzer</a></li>
        </ul>
           
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active">
                <table id='tabelleMain'></table>
                <button title="Mitarbeiter hinzufügen" class="addMitarbeiter-button" onclick="createNewMitarbeiter();"></input>
                <button title="Ausgewählte Mitarbeiter löschen" class="removeMitarbeiter-button" onclick="removeMitarbeiter();"></input>
                <button title="Tabelle drucken"  class="print-button" onclick="printElem('skillmatrix');"></input>
            </div>
            <div id="sectionB" class="tab-pane fade">
                <table id='tabelleSkills'></table>
                <div class="left"></div>
            </div>
            <div id="sectionC" class="tab-pane fade">
            </div>
        </div>
    </template>

[Gunnar Bittersmann]

@@hmm

ich habe in meinem HTML Code einen Nav Bereich, welcher zunächst leer ist. Eine JS Funktion befüllt diesen Nav Bereich mit einzelnen li Elementen und fügt jedem dieser li Elemente das OnClick-Event "testFunktion();" zu.

Fehler: li-Elemente sind nicht interaktiv, also nicht clickbar. Das kann man wohl nicht oft genug sagen; gern mehrmals täglich.

In der Navigation hast du sicher a-Elemente; diese sind interaktiv und können Ziele von click-Events sein.

Du suchst event.target?

Möglicherweise willst du nicht für jeden Menüpunkt einzeln ein click-Eventhandler angeben, sondern event delegation nutzen und den Eventhandler für das ul-Element oder das nav-Element registrieren. Siehe molily.

LLAP 🖖

[hmm]

danke, ich werd mir dazu gedanken machen.

also meine Idee für meine Skillmatrix war folgende:

1. Der Nutzer legt eine neue Skillmatrix an, diese besteht auf drei Tabs: Skillmatrix, Skills, Benutzer

2. Die neue Skillmatrix wird in einem Nav eingetragen. Legt der Nutzer z.B. Skillmatrix "IT Team" an und dann noch Skillmatrix "Tester Team", so sieht er eine Nav mit diesen beiden Menuepunkten

3. Klick er auf "Tester Team", so erscheint das dazugehörige dreier Tab aus Skillmatrix, Skills und Benutzer.

Macht es sinn, dass per nav zu lösen oder nehm ich da besser etwas anderes? Meine JavaScript Funktion würde per Html-Template-Tag die jeweiligen drei Tabs aufbauen.

[MudGuard]

Hi,

1. Der Nutzer legt eine neue Skillmatrix an, diese besteht auf drei Tabs: Skillmatrix, Skills, Benutzer

das klingt irgendwie rekursiv …

cu,
Andreas a/k/a MudGuard