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

Veenom · 23. Januar 2020

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

<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:

Code

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]();
}

Alles anzeigen

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

Code

var shadow = [1,2,3]

verwende funktioniert es.

Kann mir hier jemand weiterhelfen?

Arne Drews · 23. Januar 2020

Was funktioniert? Das erschließt sich mir nicht. Was willst Du erreichen?

Veenom · 23. Januar 2020

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

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

Arne Drews · 23. Januar 2020

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

function doSomething() { alert('triggered'); }

und Du hast ein DIV, wie dieses:

HTML

<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

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

_trigger();

Was Du aber machen kannst, wäre folgendes:

JavaScript

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.

Veenom · 23. Januar 2020

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.

Veenom · 23. Januar 2020

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.

Sempervivum · 23. Januar 2020

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

var shadows = document.getElementsByClassName('shadow-primary');
for (let i = 0; i < shadows.length; i++) {
const theShadow = shadows[i];
theShadow.addEventListener('mouseover', funktion() {
console.log(i, this);
});
theShadow.addEventListener('mouseout', funktion() {
console.log(i, this);
});
}

Veenom · 24. Januar 2020

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

Veenom · 24. Januar 2020

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

Code

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]();
}

Alles anzeigen

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]

Code

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]();
}

Alles anzeigen

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

document.querySelectorAll

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

Sempervivum · 24. Januar 2020

Zitat

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

Hast Du das getestet oder ist das eine Mutmaßung? Wenn man let statt var verwendet, passiert das nicht und es braucht keine Klimmzüge.

Veenom · 24. Januar 2020

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.

basti1012 · 24. Januar 2020

Veenom schrieb:

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

'mouseover', funktion() {
'mouseout', funktion() {

Arne Drews · 24. Januar 2020

Ich befürchte, Dir fehlt zu viel Verständnis für JavaScript, kann das sein?

In #1 machst Du folgendes:

JavaScript

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

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

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

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:

Veenom schrieb:

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

Code

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

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

Tags