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:

<div class="panel panel-primary shadow-primary">
    <div class="panel-heading">
        <h3 class="panel">CREATE2</h3>
    </div>
</div>
<div class="panel panel-primary shadow-primary">
    <div class="panel-heading">
        <h3 class="panel">CREATE1</h3>
    </div>
</div>

Jetzt kommt der JS Teil:

function log(x) {
  x.onmouseover = function() {
    console.log(x);
  }
  x.onmouseout = function() {
    console.log(x);
  }
}

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

for (var i = 0; i < shadow.length; i++) {
  shadow[i] = log.bind(this, i);
}

for (var j = 0; j < shadow.length; j++) {
  shadow[j]();
}

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

at app.min.dsapp.js:12

Dass verstehe ich nicht.

Wenn ich nähmlich

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:

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

Nein ich will die HTMLDivElemente.

Deswegen ja der Code
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.

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]

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [1,2,3]

for (var i = 0; i < funcs.length; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < funcs.length; j++) {
  funcs[j]();
}

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]

function log(x) {
  console.log('My value: ' + x);
}

var funcs = document.querySelectorAll('.shadow-primary');

for (var i = 0; i < funcs.length; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < funcs.length; j++) {
  funcs[j]();
}

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

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.