[Erledigt] Meherer Funktionen im window.onload benutzen funktioniert nicht

litterauspirna · 13.02.2011, 11:43

Hallo Leutz,

ich habe eine Problem wo mir Google auch nicht wirklich weiter geholfen hat, kann auch an schlechter Suchkriterienwahl liegen.

Ich habe folgenden Code.

Code:

window.onload = function () {
                standartBackgroundStars();
                
                for ( var i = 1; i <= 5; i++ ) {
                    var voteId = "vote_" + i;
                    document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) };
                }
                
                for ( var j = 1; j <= 5; j++ ) {
                    var vId = "vote_" + j;
                    document.getElementById( vId ).onmouseout = function( event ) { imageOnOut( event ) };
                }
            }

Was ich nun glaube ich zwar verstehe ist das immer nur die erste Funktion ausgeführt wird. Indem Fall hier geht das erste mit dem onmouseover einwandfrei, aber die mit dem onmouseout nicht. Drehe ich nun die Reihenfolge wie folgt um

Code:

                for ( var j = 1; j <= 5; j++ ) {
                    var vId = "vote_" + j;
                    document.getElementById( vId ).onclick = function( event ) { imageOnOut( event ) };
                }
                for ( var i = 1; i <= 5; i++ ) {
                    var voteId = "vote_" + i;
                    document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) };
                }

Dann funktioniert das onmouseout aber das onmouseover nicht mehr.

Kann mir da vieleicht jemand weiter helfen wie ich das Problem in den Griff bekommen kann?

Vielen Dank für zeit und Hilfe Gruß Litter

mermshaus · 13.02.2011, 11:58

Wirft Firebug irgendwelche Meldungen?

Ich sage mal vorsichtig, dass der Fehler nicht dort liegt.

Code:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">

        window.onload = function ()
        {
            for ( var i = 1; i <= 5; i++ ) {
                var voteId = "vote_" + i;
                document.getElementById( voteId ).onmouseover = function( event ) {
                    event.target.style.backgroundColor = '#f00';
                };
            }

            for ( var j = 1; j <= 5; j++ ) {
                var vId = "vote_" + j;
                document.getElementById( vId ).onmouseout = function( event ) {
                    event.target.style.backgroundColor = '#00f';
                };
            }
        };

    </script>
    </head>

    <body>
        <div id="vote_1">vote</div>
        <div id="vote_2">vote</div>
        <div id="vote_3">vote</div>
        <div id="vote_4">vote</div>
        <div id="vote_5">vote</div>
    </body>

</html>

PS: jQuery.

Chriz · 13.02.2011, 12:29

Also ein Problem von window.onload ist es sicherlich nicht. Zunächst mal wie angesprochen: Welche Meldungen bekommst du im Firebug? Du kannst dort mit console.log() auch ähnlich wie alert() Debugausgaben erzeugen:
http://getfirebug.com/logging
Das ist erstmal ein Muss.

Zweiter Punkt

Code:

document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) };

Kürzer:

Code:

document.getElementById( voteId ).onmouseover = newStarImage;

Wenn der zweite Abschnitt nicht funktioniert, ist das eigentlich immer ein Indiz dafür, dass der erste Teil etwas zerschießt (Seiteneffekte erzeugt), erst Recht wenn es beim Vertauschen umgekehrt funktioniert. Was machen denn die drei Funktionen standartBackgroundStars(), newStarImage() und imageOnOut()?

litterauspirna · 13.02.2011, 13:45

Die Funktion standartBackgroundStars() kümmert sich darum das zu jedem Beitrag jenach Bewertungspubktestand ein jeweiliges Hintergrundbild geladen wird mit Anzahl an roten wie grauen Sternen.

Die Funktion newStarImage() bewirkt, dass jenachdem über was für ein Sternelement man mit der Maus drüber fährt eine entsprechendes Bild geladen wird Anzahl an roten Sternen und grauen Sternen.

Die Funtion imageOnOut() bewirtk, dass wenn man wieder vom Sternenbewertungselement runter geht ohne geklickt zu haben, dass das Bild wieder geladen wird was dem Punktebewertungsstand entspricht.

Wie gesagt einzeln funktionieren die Funktionen ja auch, nur wenn ich eben die Funktionen tausche funktioniert nur die erste, also entweder newStarImage() oder imageOnOut(), die Funktion standartBackgroundStars() macht überhaupt gar keine Probleme.

Mit dem Firebug werde ich gleich mal probieren. Bin nur noch nicht wirklich so sicher im Umgang damit.

[EDIT]
Firebug bringt mir über die Konsole folgenden Fehler.

Zitat:

document.getElementById(vId) is null
http://localhost/star_vonting/
Line 20

Warum das allerdings so ist kann ich nicht nachvollziehen. Weil besagte IDs ja existieren.

ChrisB · 13.02.2011, 13:54

Zitat:

Zitat von litterauspirna

[...] ein jeweiliges Hintergrundbild geladen wird mit Anzahl an roten wie grauen Sternen.

Für jeden Zustand ein eigenes Bild? Das ist ja vorsintflutlich

Sowas macht man heutzutage mit einem Hintergrundbild, welches alle Zustände enthält, und dann nur noch entsprechend positioniert werden muss - Stichwort CSS Sprites.
(Für diesen Fall hier reicht vermutlich ein Bild mit x roten und x grauen Sternen nebeneinander - das kann dann für alle Zustände von 0 rote, x graue bis x rote, 0 graue eingesetzt werden.

Zum eigentlichen Problem: Wenn du mal ein vollständiges Online-Beispiel bereitstellst, könnte man das mal selber testen. Nur mit den gezeigten Code-Schnippseln kann man da jedenfalls kaum etwas zu sagen.

litterauspirna · 13.02.2011, 14:00

Hey Chris,

na klar hätte ich gleich mit dran denken können.

http://www.lit-web.de/star_voting/

Das mit den CSS-Sprites habe ich auch gelesen, nur in dem meinen Fall grad wüsste ich nicht wie ich das anwenden soll. Habe das nicht so richtig kapiert in den Erklärungen was ich gelesen habe.

hts · 13.02.2011, 14:05

Dein letztes Div ist <div id="vote_3"
Ist klar das es dann knallt, wenn deine Schleife bis 5 zählt.

ChrisB · 13.02.2011, 14:10

D'oh!

Deine Schleifen durchlaufen die IDs vote_1 bis vote_5 - und im Quellcode hast du aber nur Elemente mit den IDs vote_1 bis vote_3.

Also bricht das komplette Script an der Stelle ab, wo zum ersten mal auf die Eigenschaften eines Elements vote_4 zugegriffen werden soll.
Die nachfolgende Schleife wird dann nicht mehr ausgeführt, und das erklärt natürlich auch den beobachteten Effekt beim vertauschen der beiden Schleifen.

litterauspirna · 13.02.2011, 14:21

Ah verdammt ich bin doch ein Vollhammel. Recht habt ihr.

Das ist nun aber verdammt peinlich. Vielen Dank euch beiden.

Gruß Litter

[EDIT]
@Chris
was bedeutet denn D'oh?

ChrisB · 13.02.2011, 14:25

http://en.wikipedia.org/wiki/D'oh!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP Default charset für Funktionen	MasterQ	PHP-Fortgeschrittene	6	06.01.2011 10:03
obflush() funktioniert nicht	pfump	PHP Tipps 2010	19	24.09.2010 19:02
[Erledigt] String in Großbuchstaben umwandeln - ohne Funktionen.	PalimPalim	PHP Tipps 2010	6	04.02.2010 23:26
[Erledigt] JavaScript Funktionen richtig aufrufen	sagato0816	JavaScript, Ajax und mehr	5	10.10.2009 15:40
mod_rewrite mit slash/ohne slash funktioniert nur teilweise	taurus	Server, Hosting und Workstations	4	13.09.2009 12:57
global in Funktionen funktioniert nicht?	Scordon	PHP Tipps 2009	16	29.06.2009 19:28
[Erledigt] Funktionen aus externer JS nicht aufrufbar.	lou	JavaScript, Ajax und mehr	6	09.06.2009 18:07
[ERLEDIGT]PHP while-Schleife für Ausgabe funktioniert plötzlich nicht	fuckinghot19	PHP Tipps 2009	6	05.06.2009 22:28
[Erledigt] Umlaute ersetzen funktioniert nicht richtig	BlackSpirit	PHP Tipps 2009	19	20.04.2009 12:04
Funktionen und Variablen	greenslot	PHP Tipps 2009	1	23.03.2009 20:59
[Erledigt] Funktionen klappen nicht	mistermint	PHP Tipps 2009	15	21.01.2009 14:02
send button funktioniert nicht, finde fehler nicht	selma123	PHP Tipps 2008	3	17.09.2008 11:57
Klassen und externe Funktionen ?	ssm	PHP-Fortgeschrittene	17	18.07.2007 11:59
Dateien erstellen oder schreiben funktioniert nicht im Web		PHP Tipps 2004-2	1	05.12.2004 19:39
[Erledigt] mysql funktionen nicht verfügbar.		PHP-Fortgeschrittene	7	07.11.2004 10:38

13.02.2011, 11:43
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	[Erledigt] Meherer Funktionen im window.onload benutzen funktioniert nicht Hallo Leutz, ich habe eine Problem wo mir Google auch nicht wirklich weiter geholfen hat, kann auch an schlechter Suchkriterienwahl liegen. Ich habe folgenden Code. Code: window.onload = function () { standartBackgroundStars(); for ( var i = 1; i <= 5; i++ ) { var voteId = "vote_" + i; document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) }; } for ( var j = 1; j <= 5; j++ ) { var vId = "vote_" + j; document.getElementById( vId ).onmouseout = function( event ) { imageOnOut( event ) }; } } Was ich nun glaube ich zwar verstehe ist das immer nur die erste Funktion ausgeführt wird. Indem Fall hier geht das erste mit dem onmouseover einwandfrei, aber die mit dem onmouseout nicht. Drehe ich nun die Reihenfolge wie folgt um Code: for ( var j = 1; j <= 5; j++ ) { var vId = "vote_" + j; document.getElementById( vId ).onclick = function( event ) { imageOnOut( event ) }; } for ( var i = 1; i <= 5; i++ ) { var voteId = "vote_" + i; document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) }; } Dann funktioniert das onmouseout aber das onmouseover nicht mehr. Kann mir da vieleicht jemand weiter helfen wie ich das Problem in den Griff bekommen kann? Vielen Dank für zeit und Hilfe Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.02.2011, 12:29
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Also ein Problem von window.onload ist es sicherlich nicht. Zunächst mal wie angesprochen: Welche Meldungen bekommst du im Firebug? Du kannst dort mit console.log() auch ähnlich wie alert() Debugausgaben erzeugen: http://getfirebug.com/logging Das ist erstmal ein Muss. Zweiter Punkt Code: document.getElementById( voteId ).onmouseover = function( event ) { newStarImage( event ) }; Kürzer: Code: document.getElementById( voteId ).onmouseover = newStarImage; Wenn der zweite Abschnitt nicht funktioniert, ist das eigentlich immer ein Indiz dafür, dass der erste Teil etwas zerschießt (Seiteneffekte erzeugt), erst Recht wenn es beim Vertauschen umgekehrt funktioniert. Was machen denn die drei Funktionen standartBackgroundStars(), newStarImage() und imageOnOut()? __________________ "Nuschel ich?" - "Was?"

13.02.2011, 14:00
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Hey Chris, na klar hätte ich gleich mit dran denken können. http://www.lit-web.de/star_voting/ Das mit den CSS-Sprites habe ich auch gelesen, nur in dem meinen Fall grad wüsste ich nicht wie ich das anwenden soll. Habe das nicht so richtig kapiert in den Erklärungen was ich gelesen habe. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

13.02.2011, 14:05
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	Dein letztes Div ist <div id="vote_3" Ist klar das es dann knallt, wenn deine Schleife bis 5 zählt.

13.02.2011, 14:10
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	D'oh! Deine Schleifen durchlaufen die IDs vote_1 bis vote_5 - und im Quellcode hast du aber nur Elemente mit den IDs vote_1 bis vote_3. Also bricht das komplette Script an der Stelle ab, wo zum ersten mal auf die Eigenschaften eines Elements vote_4 zugegriffen werden soll. Die nachfolgende Schleife wird dann nicht mehr ausgeführt, und das erklärt natürlich auch den beobachteten Effekt beim vertauschen der beiden Schleifen. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

13.02.2011, 14:21
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ah verdammt ich bin doch ein Vollhammel. Recht habt ihr. Das ist nun aber verdammt peinlich. Vielen Dank euch beiden. Gruß Litter [EDIT] @Chris was bedeutet denn D'oh? __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

13.02.2011, 14:25
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	http://en.wikipedia.org/wiki/D'oh! __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?