Unwissender: Problem mit Registrierung von Eventhandlern

Hallo zusammen,

ich habe ein großes Problem beim Arbeiten mit JavaScript. Ich habe folgendes HTML-Konstrukt:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <meta http-equiv="Content-Script-Type" content="text/javascript">  
 <meta http-equiv="Content-Style-Type" content="text/css">  
  
 <script type="text/javascript" href="/js/script.js"></script>  
</head>  
  
<body>  
</body>  
</html>  

Die JS-Datei enthält nur folgende Zeilen:

  
window.onload = starte;  
function starte()  
{  
 window.alert("Hallo");  
}  

Warum passiert hier nichts? Der Pfad zur JS-Datei passt :-)

Vielen Dank für eure Hilfe!

  1. Hi,

    Die JS-Datei enthält nur folgende Zeilen:

    window.onload = starte;
    function starte()
    {
    window.alert("Hallo");
    }

      
    Und wenn du das mal in umgekehrter Reihenfolge notierst ...?  
      
    MfG ChrisB  
      
    
    -- 
    "The Internet: Technological marvel of marvels - but if you don't know \*what\* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    
  2. <script type="text/javascript" href="/js/script.js"></script>
    </head>

    Statt href ein src verwenden ;-)

    1. <script type="text/javascript" href="/js/script.js"></script>
      </head>

      Statt href ein src verwenden ;-)

      Oh shit... Danke schön :-)

      Jetzt habe ich noch eine Frage, und zwar: Folgender Aufbau

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
        
      <html>  
      <head>  
       <title>Test</title>  
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
       <meta http-equiv="Content-Script-Type" content="text/javascript">  
       <meta http-equiv="Content-Style-Type" content="text/css">  
        
       <script type="text/javascript">  
        document.getElementById('test').onclick = starte;  
        function starte()  
        {  
         window.alert("Hallo");  
        }  
       </script>  
      </head>  
        
      <body>  
      <p id='test'>  
       Klick mich!  
      </p>  
      </body>  
      </html>  
      
      

      Warum funktioniert das nicht? Die Schreibweise 'getElementById().event = bla' ist doch zulässig, oder?

      Vielen Dank!

      1. Hi,

        document.getElementById('test').onclick = starte;
          function starte()
          {
           window.alert("Hallo");
          }

        starte ist zum Zeitpunkt der Zuweisung undefined. Schreib die Funktion als über die event zuweisung.

        Gruß!

        1. document.getElementById('test').onclick = starte;
            function starte()
            {
             window.alert("Hallo");
            }

          starte ist zum Zeitpunkt der Zuweisung undefined. Schreib die Funktion als über die event zuweisung.

          Das ist falsch!
          Der JS Block wird komplett übersetzt. Du kannst immer eine Funktion nutzen, die weiter unten im Quellcode steht.

          Struppi.

      2. Hi,

        <script type="text/javascript">
          document.getElementById('test').onclick = starte;
        ...
        <body>
        <p id='test'>

        Warum funktioniert das nicht?

        Weil es noch kein Element mit der ID test gibt zu dem Zeitpunkt, wo du versuchst darauf zuzugreifen.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        1. Weil es noch kein Element mit der ID test gibt zu dem Zeitpunkt, wo du versuchst darauf zuzugreifen.

          Ah, ok. Danke schön. Dann muss ich also alle JS-Sachen hinter den <body>-Tag schreiben?
          Sieht ja scheiße aus... :-) Nochmals danke für die schnelle Hilfe!

          Viele Grüße!

          1. Hi,

            Weil es noch kein Element mit der ID test gibt zu dem Zeitpunkt, wo du versuchst darauf zuzugreifen.

            Ah, ok. Danke schön. Dann muss ich also alle JS-Sachen hinter den <body>-Tag schreiben?

            Nein - sondern zu dem zurueckkehren, mit dem du angefangen hast: window.onload

            MfG ChrisB

            --
            "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
            1. Hi,

              Nein - sondern zu dem zurueckkehren, mit dem du angefangen hast: window.onload

              Ich bin mir nicht ganz sicher, ob ich verstanden habe, was du meinst aber ich habe gesucht und die Möglichkeit mit addEventListener gefunden. Also füge ich per onload die eventlistener dynamisch hinzu, oder?

              Viele Grüße!

              1. Hi,

                Nein - sondern zu dem zurueckkehren, mit dem du angefangen hast: window.onload

                Ich bin mir nicht ganz sicher, ob ich verstanden habe, was du meinst aber ich habe gesucht und die Möglichkeit mit addEventListener gefunden. Also füge ich per onload die eventlistener dynamisch hinzu, oder?

                addEventListener brauchst du nicht unbedingt, du kannst auch bei elementreferenz.onwhatever = funktionsreferenz bleiben.

                Nur auf HTML-Elemente zugreifen solltest du erst dann, wenn diese auch verfuegbar sind - z.B., in dem du eben das Feuern des Events onload abwartest.

                MfG ChrisB

                --
                "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
                1. addEventListener brauchst du nicht unbedingt, du kannst auch bei elementreferenz.onwhatever = funktionsreferenz bleiben.

                  Nur auf HTML-Elemente zugreifen solltest du erst dann, wenn diese auch verfuegbar sind - z.B., in dem du eben das Feuern des Events onload abwartest.

                  Widerspricht sich das denn nicht? elementreferenz ist doch ein Zugriff auf ein HTML-Element, oder?

                  Könntest du mir das vlt. an einem kleinen Code-Beispiel zeigen? Ich verstehe nicht, wie ich deinen Tip in Code umsetzen kann.

                  Vielen Dank!

                  1. Hi,

                    addEventListener brauchst du nicht unbedingt, du kannst auch bei elementreferenz.onwhatever = funktionsreferenz bleiben.

                    Nur auf HTML-Elemente zugreifen solltest du erst dann, wenn diese auch verfuegbar sind - z.B., in dem du eben das Feuern des Events onload abwartest.

                    Widerspricht sich das denn nicht?

                    Nein.

                    elementreferenz ist doch ein Zugriff auf ein HTML-Element, oder?

                    Es ist das, was der Name sagt - die Referenz auf ein (HTML-)Element.

                    Diese musst du dir natuerlich erst mal besorgen, wenn es sich nicht um ein Element handelt, auf das dir der Browser sowieso Zugriff bereitstellt (wie bspw. window).

                    Könntest du mir das vlt. an einem kleinen Code-Beispiel zeigen? Ich verstehe nicht, wie ich deinen Tip in Code umsetzen kann.

                    Rufe ueber window.onload eine Funktion auf, in der du dir eine Referenz auf das gewuenschte HTML-Element besorgst - dann kannst du mit dem machen, was du willst.

                    MfG ChrisB

                    --
                    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
                    1. Rufe ueber window.onload eine Funktion auf, in der du dir eine Referenz auf das gewuenschte HTML-Element besorgst - dann kannst du mit dem machen, was du willst.

                      Vielen Dank!! Jetzt habe ich es. Für das Archiv noch mein Code:

                        
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
                        
                      <html>  
                      <head>  
                       <title>Test</title>  
                       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
                       <meta http-equiv="Content-Script-Type" content="text/javascript">  
                       <meta http-equiv="Content-Style-Type" content="text/css">  
                        
                       <script type="text/javascript">  
                        
                      ~~~~~~javascript
                      window.onload = doOnload;  
                        
                        function doOnload()  
                        {  
                         document.getElementById('test').onclick = starte;  
                        }  
                        
                        function starte()  
                        {  
                         window.alert("Hallo");  
                        }
                      ~~~~~~html
                        
                        
                       </script>  
                      </head>  
                        
                      <body>  
                      <p id='test'>  
                       Klick mich!  
                      </p>  
                      </body>  
                      </html>  
                      
                      
  3. Hi!

    Nachdem ich jetzt relativ erfolgreich in JS wieder reingefunden habe, wollte ich mir OOP mit JS anschauen (von anderen Sprachen her kenne ich OOP schon). Allerdings habe ich ein Problem:

      
    function test()  
    {  
     this.startsize = 200;  
      
     this.show = function ()  
     {  
      alert(test.startsize);  
     };  
    }  
    var tester = new test();  
    window.onload = tester.show;  
    
    

    Ausgegeben wird "undefined". Wenn ich es mit this.startsize versucht hätte, dann würde ich es verstehen. this zeigt ja dann auf window, oder? Aber wie ist das Problem zu lösen?

    Vielen Dank für eure Hilfe!

    1. function test()
      {
      this.startsize = 200;

      this.show = function ()
      {
        alert(test.startsize);

      Du musst hier natürlich das aktuelle Objekt verwenden.
      [code lang=javascript]alert(this.startsize);

        
      
      > var tester = new test();  
      > window.onload = tester.show;  
        
      Das geht nicht, da in der onload Funktion this = window ist, wie du schon festgestellt hast. Daher brauchst du eine anonyme Funktion:  
      `window.onload = function() { tester.show();};`{:.language-javascript}  
        
      Struppi.
      
    2. Hi,

      Aber wie ist das Problem zu lösen?

      Am besten, in dem wir jetzt hier nicht alles haeppchenweise zum x-ten Mal erklaeren - sondern du dir mal anschaust, was es in der SELFHTML-Artikelsammlung bzgl. JavaScript alles zum Thema OOP & Co. gibt:

      http://aktuell.de.selfhtml.org/artikel/javascript/

      MfG ChrisB

      --
      "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."