zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden getElementsByTag und mouseOver

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.07.2013, 17:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.08.2005
Beiträge: 134
manya befindet sich auf einem aufstrebenden Ast
Standard getElementsByTag und mouseOver

Hallo,

Ich möchte bei Hover über den farbigen Links die Hintergrundfarbe aller zugehörenden Submenü-Links ändern.

Bei dem roten und grünen Link funktioniert es wie gewünscht:
Untitled Document

Eleganter geht es natürlich mit einer Schleife und einer Funktion, die ich in dem gelben Link anzuwenden versucht habe.
Ich bekomme es aber nicht hin.
Kann einer von euch bitte helfen?

Gruß,
Manya
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.07.2013, 17:55
Benutzerbild von programm
#
neuer user
 
Registriert seit: 26.02.2008
Ort: Wuppertal
Beiträge: 44
programm befindet sich auf einem aufstrebenden Ast
Standard

Was mir zuerst auffällt:

Code:
<script type="text/javascript">
 
function  farbe() {

var ind = 0;
var anzahl_a = document.getElementsById("sprache").document.getElementsByTagName("a").length;

{
 alert(var anzahl_a);
 
 for (var ind = 0;   ind < anzahl_a;   i++)    
    {
    document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseover = style.backgroundColor='#FFC', 
    document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseout = style.backgroundColor='#FFF'; 
    }
	
</script>
Grün = da sollte die geschweifte Klammer sein, rot = da nicht.

Firebug zeigt so etwas direkt an. Debuggst du dein Script auf irgendeine Art?
__________________
mein name ist programm
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.07.2013, 19:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.08.2005
Beiträge: 134
manya befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von programm Beitrag anzeigen
Was mir zuerst auffällt:

Grün = da sollte die geschweifte Klammer sein, rot = da nicht.

Firebug zeigt so etwas direkt an. Debuggst du dein Script auf irgendeine Art?
Hallo,

Danke für den Tipp.

Ich benutze die Fehler-Konsole von Firefox, und die hat nichts angezeigt.

Ich habe es jetzt so:

Code:
<script type="text/javascript">
 
function  farbe()  

{

var ind = 0;
var anzahl_a = document.getElementById("sprache").document.getElementsByTagName("a").length;


 alert(var anzahl_a); 
 for (var ind = 0;   ind < anzahl_a;   i++)    
    {
    document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseover = style.backgroundColor='#FFC', 
    document.getElementById("sprache").document.getElementsByTagName("a")[ind].onmouseout = style.backgroundColor='#FFF'; 
    }
	
}
	
</script>
aber leider funktioniert es immer noch nicht.
Kann da vielleicht nochmal jemand drüberschauen?

Gruß,
Manya


Edit:
Hier ist die geänderte Datei
http://manya.ma.funpic.de/js-test/ge...tsbytag-1.html

Geändert von manya (31.07.2013 um 21:08 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2013, 21:44
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Ok, ich versuchs mal, du solltest dir aber unbedingt die Grundlagen zu Javascript aneignen:

alert(var anzahl_a); ist ein Syntaxfehler, dort darf kein var vorkommen.

Überhaupt darfst du var nur für die Initialisierung einer lokalen Variable verwenden, also nur bei der ersten Notation, nicht danach. Üblich ist es alle Variablen am Anfang einer Funktion zu Initialisieren, da Javascript nur den Function-Scope kennt.

Es muss getElementById heißen, es kann eh immer nur ein Element mit einer ID geben.

document ist ein Objekt von window, du kannst darauf nicht durch den Rückgabewert von Funktionen zugreifen (es sei denn sie würden das window-Objekt zurückgeben, was wenig sinnvoll wäre).

onmouseover und onmouseout müssen Funktionen zugewiesen werden, diese werden dann ausgeführt sobald das entsprechende Event gefeuert wird. Eigentlich möchtest du diese Events auch gar nicht nutzen, wenn ich deine Beispiele bei den anderen Menüpunkten richtig verstehe, sondern die Farbe sofort ändern (deine Funktion wird ja erst beim Hover-Event ausgeführt). Du bräuchtest dann allerdings noch eine Funktion die du bei onmouseout aufrufst.

So könnte der aktuelle Stand aussehen:
Code:
function farbe() {
	var ind;
	var anzahl_a = document.getElementById("sprache").getElementsByTagName("a").length;

 	alert(anzahl_a);
 
	for (ind = 0; ind < anzahl_a; ind++) {
		document.getElementById("sprache").getElementsByTagName("a")[ind].style.backgroundColor='#FFC';
	}
}
Eigentlich nutzt man die on*-Attribute nach Möglichkeit nicht, sondern fügt die Eventlistener mit addEventListener hinzu. Wie schon gesagt wäre es gut, wenn du erst mal die Grundlagen lernst, sonst tust du dich nur unnötig schwer.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.08.2013, 09:36
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von manya Beitrag anzeigen
Ich benutze die Fehler-Konsole von Firefox, und die hat nichts angezeigt.
Dann benutzt du sie falsch, natürlich zeigt die Fehlerkonsole die Fehler an auf deiner Seite an.

Code:
Zeitstempel: 01.08.2013 08:35:19
Fehler: SyntaxError: syntax error
Quelldatei: http://manya.ma.funpic.de/js-test/getelementsbytag.html
Zeile: 64
Quelltext:
var ind = 0; 

Zeitstempel: 01.08.2013 08:36:10
Fehler: ReferenceError: farbe is not defined
Quelldatei: http://manya.ma.funpic.de/js-test/getelementsbytag.html
Zeile: 1
Mit Zitat antworten
  #6 (permalink)  
Alt 01.08.2013, 09:39
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von manya Beitrag anzeigen
Edit:
Hier ist die geänderte Datei
Posting-3
Auch dort werden Fehler in der Konsole angezeigt. Du weißt wirklich was die Fehlerkonsole ist und wie sie funktioniert?
Mit Zitat antworten
  #7 (permalink)  
Alt 01.08.2013, 12:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.08.2005
Beiträge: 134
manya befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Es muss getElementById heißen, es kann eh immer nur ein Element mit einer ID geben.
Das hatte ich erst nachher gemerkt, und habe es im Script im Posting noch geändert. Da hattest du das Ganze aber wahrscheinlich schon im Speicher.

Zitat:
document ist ein Objekt von window, du kannst darauf nicht durch den Rückgabewert von Funktionen zugreifen (es sei denn sie würden das window-Objekt zurückgeben, was wenig sinnvoll wäre).
Ich habe mir die Beispiel-Schnipsel über Google zusammengesucht. Wenn ich in der Funktion das "document" weglasse, dann findet kein Farbwechsel mehr statt. Wo meintest du denn, daß ich es weglassen sollte?

Zitat:
onmouseover und onmouseout müssen Funktionen zugewiesen werden, diese werden dann ausgeführt sobald das entsprechende Event gefeuert wird. Eigentlich möchtest du diese Events auch gar nicht nutzen, wenn ich deine Beispiele bei den anderen Menüpunkten richtig verstehe, sondern die Farbe sofort ändern (deine Funktion wird ja erst beim Hover-Event ausgeführt).
Nein, die Farben sollen nicht sofort geändert werden, sondern wirklich nur bei MausOver über dem entsprechenden Link.

Zitat:
Du bräuchtest dann allerdings noch eine Funktion die du bei onmouseout aufrufst.
Stimmt.
Das habe ich jetzt:
test-7

Zitat:
Wie schon gesagt wäre es gut, wenn du erst mal die Grundlagen lernst, sonst tust du dich nur unnötig schwer.
Wie wahr!
Ich habe mich bald zu Tode gegoogelt, um passende Schnipsel zu finden.

Tausend Dank für deine Erklärung und deinen Beispielcode!

Gruß,
Manya
Mit Zitat antworten
  #8 (permalink)  
Alt 01.08.2013, 12:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 04.08.2005
Beiträge: 134
manya befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Auch dort werden Fehler in der Konsole angezeigt. Du weißt wirklich was die Fehlerkonsole ist und wie sie funktioniert?
firefox: "extras - Fehlerkonsole"

Ich bin immer davon ausgegangen, daß sie automatisch funktioniert.

Jedenfalls wird bei mir oft eine ewig lange Liste mit Warnungen und Hinweisen angezeigt. Direkt vor dem Aufruf meiner Testdatei habe ich die Liste in der Fehlerkonsole also gelöscht und nachdem die Testseite geladen war, die Fehlerkonsole wieder aufgerufen.
Da stand dann nichts mehr drin.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.08.2013, 12:48
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von manya Beitrag anzeigen
firefox: "extras - Fehlerkonsole"

Ich bin immer davon ausgegangen, daß sie automatisch funktioniert.

Jedenfalls wird bei mir oft eine ewig lange Liste mit Warnungen und Hinweisen angezeigt. Direkt vor dem Aufruf meiner Testdatei habe ich die Liste in der Fehlerkonsole also gelöscht und nachdem die Testseite geladen war, die Fehlerkonsole wieder aufgerufen.
Da stand dann nichts mehr drin.
Noch mal das stimmt nicht. Beide Seiten, die du bisher gezeigt hast zeigten eine Fehlermeldung beim laden und beim anklicken des gelben Bereichs.

Wenn du die Warnungen ignorieren willst, dann blende sie aus, im Firefox kannst du sehr einfach auswählen was er dir in der Konsole anzeigen soll. Dazu gibt es grosse beschriftete Buttons in dem Fenster.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.08.2013, 13:15
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von manya Beitrag anzeigen
Ich habe mir die Beispiel-Schnipsel über Google zusammengesucht. Wenn ich in der Funktion das "document" weglasse, dann findet kein Farbwechsel mehr statt. Wo meintest du denn, daß ich es weglassen sollte?
Ich denke mal du hast in meinem Beispielcode gesehen was ich meinte?! Vorne brauchst du das document, bei weiteren Aufrufen nicht.

Zitat:
Zitat von manya Beitrag anzeigen
Nein, die Farben sollen nicht sofort geändert werden, sondern wirklich nur bei MausOver über dem entsprechenden Link.
Da die Funktion aber erst bei onmouseover ausgeführt wird, willst du die Farben innerhalb der Funktion sofort wechseln, das ist genau das was aktuell passiert.

Zitat:
Zitat von manya Beitrag anzeigen
Stimmt.
Das habe ich jetzt:
test-7
Gut, jetzt hast du eine Version die so funktioniert wie du das gerne hättest?! Funktionen hast du jetzt kennengelernt, du nutzt aber deren Vorteil noch nicht, da du den Code trotzdem mehrfach duplizierst. So kannst du dir die Arbeit erleichtern (Beispiel):

Code:
function changeColor(subMenuId, color) {
	var ind;
	var links = document.getElementById(subMenuId).getElementsByTagName('a');

	for (ind = 0; ind < links.length; ind++) {
		links[ind].style.backgroundColor = color;
	}
}
Die a-Elemente werden jetzt nur noch einmalig aus dem DOM geholt und in einer Variablen vorgehalten, das ist sinnvoll, da DOM-Zugriff in der Regel langsam ist. Deine festgeschriebenen Werte habe ich durch Variablen ersetzt, jetzt kannst du die Funktion nutzen um alle Links in einem beliebigen Elternelement mit einer beliebigen Hintergrundfarbe zu versehen.

Zum Beispiel:
HTML-Code:
<a style="background-color: #0cc;" href="#"
        onmouseover="changeColor('betriebssysteme', '#0cc')"
        onmouseout="changeColor('betriebssysteme', '#fff')">Betriebssysteme</a>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mouseover hilfe bitte spyuser (X)HTML 4 27.02.2013 16:19
Jquery Code für Mouseover etwas vereinfachen connor Javascript & Ajax 8 08.03.2010 00:01
Css mouseover problem Biomechaniker CSS 3 16.10.2009 22:33
CSS Spry Menu Problem mit Hintergrund bei Mouseover myron CSS 9 12.07.2009 14:34
li mouseover mit unterschiedlichen größen temp11 CSS 4 08.10.2007 17:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:48 Uhr.