Elias: Könbnt ihr mir auf die Sprünge helfen?

Guten Tag!
Ich hoffe, dass ihr mit einem Anfänger, wie mir, nicht zu hart seid. :-)
Ich würde gerne eine Funktion schreiben, die sich irgendein Element per ID oder Class holt. Und dieses Element soll die Schriftfarbe bei mouseover verändern.
Und jetzt habe ich absolut keine Ahnung wie ich das mit dem Mouseover anstellen soll.
Könnt ihr mir mal auf die Sprünge helfen? Ich wäre echt dankbar dafür.
Liebe Grüße, Elias

PS: Hier noch ein kleiner Versuch von mir, der natürlich nicht geht.

<html>
<head>
 <title>Test</title>
<script type="text/javascript">
document.getElementById("hallo").onmouseover = farbe;
function farbe() {
 document.getElementById("hallo").style.color = "#FF0000";
}
</script>
</head>

<body>
 <div id="hallo">
  Hallo
 </div>
</body>
</html>

  1. Hi,

    Ich würde gerne eine Funktion schreiben, die sich irgendein Element per ID oder Class holt. Und dieses Element soll die Schriftfarbe bei mouseover verändern.

    warum nimmst Du dafür nicht CSS?

    Und jetzt habe ich absolut keine Ahnung wie ich das mit dem Mouseover anstellen soll.

    Die Eventhandler-Eigenschaften von JavaScript-Objekten nehmen Funktionsreferenzen auf. Es kann sich dabei auch um eine Referenz auf eine anonyme Funktion handeln, die direkt an der entsprechenden Code-Stelle erzeugt wird.

    document.getElementById("hallo").onmouseover = farbe;

    Was sagt an _genau_ dieser Stelle ein alert() der gerade veränderten Eigenschaft?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo!
      Wow. Danke für die schnelle Antwort.

      Ich würde gerne eine Funktion schreiben, die sich irgendein Element per ID oder Class holt. Und dieses Element soll die Schriftfarbe bei mouseover verändern.

      warum nimmst Du dafür nicht CSS?

      Weil ich mich mehr mit JavaScript befassen will. Und zur Übung wollte ich mal das umsetzen.

      Und jetzt habe ich absolut keine Ahnung wie ich das mit dem Mouseover anstellen soll.

      Die Eventhandler-Eigenschaften von JavaScript-Objekten nehmen Funktionsreferenzen auf. Es kann sich dabei auch um eine Referenz auf eine anonyme Funktion handeln, die direkt an der entsprechenden Code-Stelle erzeugt wird.

      Also etwas wie:
      onmouseover = function() {
        //js-code
      }

      document.getElementById("hallo").onmouseover = farbe;

      Was sagt an _genau_ dieser Stelle ein alert() der gerade veränderten Eigenschaft?

      Gar nichts. Soweit kommt es leider nicht. Die JavaScript-Konsole sagt mir: document.getElementById("hallo") has no properties. Und zwar bevor es überhaupt zum alert() kommt.

      Vielen Dank für deine Antwort! Grüße, Elias

      Hier nochmal das, wie ich das mit dem alert() gemacht habe. Ist das falsch?
      <html>
      <head>
       <title>Test</title>
      <script type="text/javascript">
      document.getElementById("hallo").onmouseover = farbe; // an dieser Stelle hat document.getElementById("hallo") keine properties :-(
      alert(document.getElementById("hallo").style.color);
      function farbe() {
       document.getElementById("hallo").style.color = "#FF0000";
      }
      </script>
      </head>

      <body>
       <div id="hallo">
        Hallo
       </div>
      </body>
      </html>

      1. Hi,

        warum nimmst Du dafür nicht CSS?
        Weil ich mich mehr mit JavaScript befassen will. Und zur Übung wollte ich mal das umsetzen.

        guter Grund.

        Also etwas wie:
        onmouseover = function() {
          //js-code
        }

        Ja. Im Prinzip also so, wie Du es bereits gemacht hast.

        document.getElementById("hallo").onmouseover = farbe;
        Was sagt an _genau_ dieser Stelle ein alert() der gerade veränderten Eigenschaft?
        Gar nichts. Soweit kommt es leider nicht. Die JavaScript-Konsole sagt mir: document.getElementById("hallo") has no properties.

        Dann gibt es das betreffende Element offenbar an dieser Code-Stelle noch nicht. Problem gelöst.

        Hier nochmal das, wie ich das mit dem alert() gemacht habe. Ist das falsch?

        Nein, nur falsch gedacht. Ein HTML-Dokument wird in üblicher Leserichtung abgearbeitet, also insbesondere von oben nach unten. Wenn Du oben auf etwas zugreifst, das eventuell mal ein paar Jahre später unten kommt, dann stellt der Browser lediglich fest, dass _jetzt_ dieses Etwas noch nicht da ist und er die geforderte Aufgabe also nicht erfüllen kann.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Danke!
          Elias

  2. hi,

    Ich würde gerne eine Funktion schreiben, die sich irgendein Element per ID oder Class holt. Und dieses Element soll die Schriftfarbe bei mouseover verändern.

    Dass das in richtigen Browsern auch per CSS mittels :hover geht, ist dir bekannt?

    PS: Hier noch ein kleiner Versuch von mir, der natürlich nicht geht.

    Sieht eigentlich schon gar nicht so schlecht aus.

    document.getElementById("hallo").onmouseover = farbe;

    Referenz auf Element besorgen, und dem Eventhandler onmouseover die Funktionsreferenz farbe zuweisen - ist eigentlich OK.

    function farbe() {
    document.getElementById("hallo").style.color = "#FF0000";
    }

    Referenz auf Element erneut besorgen ist hier überflüssig - du könntest in der Funktion mittels this auf das Element, auf dem der Event auftrat zugreifen - aber nicht falsch. Farbe ändern über style.color sieht auch OK aus.

    Vermutlich dürfte das Problem einfach sein, dass zu dem Zeitpunkt, wo du das erste, die Zuweisung des Eventhandlers, zu machen versuchst, das Element noch gar nicht existiert.
    Also entweder <script>-Block hinter das Element packen (unschön), oder diese Aktion per onload aufrufen.

    Das könnte z.B. so aussehen:

    window.onload = function() {  
       document.getElementById("hallo").onmouseover = farbe;  
    }
    

    Durch die Umklammerung mit functiob() { ... } erhalten wir eine Funktionsreferenz, und diese wird dann dem onload-Event zugewiesen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hello out there!

      window.onload = function() {  
         document.getElementById("hallo").onmouseover = farbe;  
      };
      


      An der Stelle macht sich ein Semikolon nicht schlecht.

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    2. hi,

      Ich würde gerne eine Funktion schreiben, die sich irgendein Element per ID oder Class holt. Und dieses Element soll die Schriftfarbe bei mouseover verändern.

      Dass das in richtigen Browsern auch per CSS mittels :hover geht, ist dir bekannt?

      Ja! Aber ich wollte mich mal ein bisschen mehr mit JavaScript befassen und dafür einfach mal das gleiche Ergebnis wie :hover mit JavaScript erreichen.

      Danke schön für deine Hilfe. Es klappt jetzt. Much THX :-)
      Liebe Grüße, Elias