Bei Onmouse Event JavaScript Code für eine Klasse ausführen

  • Hallo Leute,


    ich möchte gerne ein mouseover Event für eine vordefinierte Klasse erstellen.

    Ich habe dabei jedoch schwierigkeiten.


    Mein HTML Code sieht so aus:

    Code
    1. <div class="panel panel-primary shadow-primary">
    2. <div class="panel-heading">
    3. <h3 class="panel">CREATE2</h3>
    4. </div>
    5. </div>
    6. <div class="panel panel-primary shadow-primary">
    7. <div class="panel-heading">
    8. <h3 class="panel">CREATE1</h3>
    9. </div>
    10. </div>


    Jetzt kommt der JS Teil:



    app.min.dsapp.js:12 Uncaught TypeError: shadow[j] is not a function

    at app.min.dsapp.js:12


    Dass verstehe ich nicht. =O

    Wenn ich nähmlich


    Code
    1. var shadow = [1,2,3]


    verwende funktioniert es.

    Kann mir hier jemand weiterhelfen? :)

  • Erreichen möchte ich eine Funktion, die auf einem bestimmten Klassennamen beruht und immer wieder ausgeführt werden kann ( deshalb mouseover )

    Aufgabe dieser Funktion ist nicht relevant, deswegen hier nur:


    Code
    1. console.log(x);


    Gerne kannst du es selbst versuchen.

    Dass Array [1,2,3] wird durchlaufen und durch den Command console.log werden die Strings 1 / 2 / 3 nacheinander ausgegeben.


    In dem Hauptbeispiel jedoch versuche ich die selbe Funktion genau auszuführen.
    Über die Konsole sollte also, wenn man über das jeweilige DIV mit der Maus kommt, das selbe DIV ausgegeben werden.

    Leider scheitert es hier am Fehler:

    app.min.dsapp.js:12 Uncaught TypeError: shadow[j] is not a function

    at app.min.dsapp.js:12

  • Dass er die Werte in der Konsole ausgibt, bezweifle ich in keinster Weise. Dein Problem ist, dass Du in Deiner NodeList, die Du von getElementsByClassName erhältst HTMLDivElemente hast und nicht das, was Du eigentlich willst. Ich denke, Du willst CREATE1 und CREATE2 aufrufen, stimmts?


    Mal als kurzes Beispiel

    Gegeben sei folgende Funktion:

    JavaScript
    1. function doSomething() { alert('triggered'); }

    und Du hast ein DIV, wie dieses:

    HTML
    1. <div class="foo"><p>doSomething</p></div>

    Dann hast Du nach einem DOM-Selektor immer das Element ( bei mehreren natürlich eine NodeList mit Elementen ), bspw.:

    JavaScript
    1. var _trigger = document.querySelectorAll( '.foo > p' )[0].textContent; // liefert: "doSomething" als STRING!!!

    Folgendes würde nicht funktionieren und die von Dir bekannte Meldung werfen:

    JavaScript
    1. _trigger();

    Was Du aber machen kannst, wäre folgendes:

    JavaScript
    1. window[_trigger]();

    Das würde funktionieren. Ich bezweifle allerdings, dass das der richtige Weg ist, denn ich sehe keinen Grund, Funktionen auf diese Weise aufzurufen, wenn ich ehrlich bin.

  • Nein ich will die HTMLDivElemente.

    Deswegen ja der Code :D
    Ich will nur wissen wieso ich die HTMLDivElemente nicht in der Konsole ausgegeben bekomme.

    Ich habe es getestet und wenn ich die HTMLDivElemente einzeln ausgebe funktioniert es.

    Nur nicht in der For Schleife.

  • Ich möchte alle HTMLDivElemente der Klasse shadow-primary mit einer function abarbeiten. Ich möchte dafür jedoch kein HTML event verwenden sondern die Klasse mit javascript auslesen.

    Fürs erste möchte ich das HTML Element in Javascript ausgeben.

    Dass funktioniert ja.
    Nur habe ich Probleme bei dem Error der mir zurückgegeben wird.

  • Wenn ich mal deinen kryptischen Code außen vor lasse und nur dies lese:

    Zitat

    ich möchte gerne ein mouseover Event für eine vordefinierte Klasse erstellen.

    müsste dieser einfache und geradlinige Code doch tun, was Du vorhast:

    Code
    1. var shadows = document.getElementsByClassName('shadow-primary');
    2. for (let i = 0; i < shadows.length; i++) {
    3. const theShadow = shadows[i];
    4. theShadow.addEventListener('mouseover', funktion() {
    5. console.log(i, this);
    6. });
    7. theShadow.addEventListener('mouseout', funktion() {
    8. console.log(i, this);
    9. });
    10. }
  • Hallo Sempervivum,


    ja diesen Code hatte ich bereits in Verwendung.

    Dass ist nur leider eine Funktionalität, die in Javascript nicht möglich ist.

    Die For Loop, die du erstellst. Wird in deinem Beispiel genau ein Mal aufgerufen.
    Da die Maus aber nicht bein neuladen der Seite auf dem Element liegt,

    gibt dir die Maus genau ein mal beim neuladen das Element zurück, wie es ist wenn über dem Element kein Mauszeiger liegt.


    Solltest du also in deinem Code über eines der Elemente mit deinem Mauszeiger gehen, wird dir immer das letzte Element der For Loop angezeigt.


    Um dieses Problem zu beheben, habe ich versucht die Funktion außerhalb der For Schleife aufzurufen.
    Leider kommt es dabei zu meinem beschriebenen Fehler :/

  • Worin unterscheidet sich denn das Array [1,2,3]

    Ausgabe:


    My value: 0

    My value: 1

    My value: 2

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


    von dem Array [div.panel.panel-primary.shadow-primary, div.panel.panel-primary.shadow-primary]



    Ausgabe hier:


    Uncaught TypeError: funcs[j] is not a function





    Ich trenne doch bei beiden Beispielen ein Array in dessen Einzelteile und gebe es in der Konsole aus. Wieso funktioniert dass mit einem einfachen Integer aber nicht mit einem HTMLDIVElement?



    Kann es sein dass mein Code zwar korrekt ist aber ich von

    Code
    1. document.querySelectorAll

    kein Array zurück bekomme?
    Wenn dem der Fall ist wie kann ich das Objekt in ein Array umwandeln?

  • Der von dir beschriebene Code funktioniert nicht :/


    Mein Problem ( jedenfalls in meinem ersten Code ) ist, dass die Variable in jeder Ihrer anonymen Funktionen an dieselbe Variable außerhalb der Funktion gebunden ist.

    Deshalb muss man die Variable in jeder Funktion an einen separaten, unveränderlichen Wert außerhalb der Funktion binden.

  • Der von dir beschriebene Code funktioniert nicht :/

    Ich habe den jetzt nicht getestet weil ich nicht wirklich verstehe was du willst

    Aber auch ein Profi wie Sempervivum kann mal auf der schnelle ein Tipp fehler reinhauen.

    Denn hättest du aber bemerken müßen beim testen.

    in den Code sind da 2 Fehler

    Code
    1. 'mouseover', funktion() {
    2. 'mouseout', funktion() {
  • Ich befürchte, Dir fehlt zu viel Verständnis für JavaScript, kann das sein?


    In #1 machst Du folgendes:

    JavaScript
    1. var shadow = document.getElementsByClassName('shadow-primary');

    Das liefert Dir eine NodeList in der Variablen shadow, die Du dann mit einer for-Schleife iterierst, bis dahin richtig:

    JavaScript
    1. for (var j = 0; j < shadow.length; j++) {
    2.     // ...
    3. }

    Du hast in jedem Schleifendurchlauf genau ein Element aus der NodeList, in deinem Fall also jedesmal ein HTMLDivElement. Du versuchst aber dieses HTMLDivElement als Funktion aufzurufen:

    JavaScript
    1. shadow[j]();

    Ganz egal, was Du mit dem log.bind() vorhast, es funktioniert so nicht.


    Ich bin ehrlich, ich habe noch nicht so ganz verstanden, was Du am Ende erreichen willst, aber dass es so wie Du es machst nicht geht ist erkennbar und ich behaupte auch, dass Dein Ziel einfacher zu erreichen wäre. Wenn Du Lust hast, kannst Du es ja nochmal etwas detaillierter erklären?


    Um darauf noch einzugehen:

    Kann es sein, dass mein Code zwar korrekt ist aber ich von

    Code
    1. document.querySelectorAll

    kein Array zurück bekomme?
    Wenn dem der Fall ist wie kann ich das Objekt in ein Array umwandeln?

    Grundsätzlich bekommst Du von keiner Selektor-Methode ein Array zurück, es wird immer ein Element oder eine NodeList sein.

    Solange Du mi einer for-Schleife darüber iterierst, kannst Du mit shadow[i] auf jedes Element zugreifen.


    Wenn Du ein Array haben willst, musst Du das slicen:

    JavaScript
    1. var _elements = document.querySelector('div');
    2. var _elementsArray = Array.prototype.slice.call(_elements);