Uli: HTML mit Javascript-Objekt-Aufruf

SELF-Forum

HTML mit Javascript-Objekt-Aufruf

Uli
– Informationen zu den Bewertungsregeln

Ich generiere HTML mit einem Aufruf eines Javascript-Objekts (hier: "theTable"). Die JavaScript-Konsole meldet aber "theTable is not defined" - warum?
Wenn man in das onMouseover dagegen this.theTable.msgBox('hello') schreibt erhält man "this.theTable has no properties" - dabei geht es ja nicht um Properties, sondern um einen Funktionsaufruf.

Hat jemand eine Idee, wie dieses Verhalten zu erklären ist?

<html>
<head>
 <title>example</title>
</head>
<script language="JavaScript" >
 function myTable() {
  this.writeTable = function _writeTable() {
   var text = "";
   text = "<table border>";
   text += "<tr onMouseover="this.theTable.msgBox('hello') >\n";
   text += "<td>ABC</td>";
   text += "</table>";
   if(document.getElementById)
    document.getElementById("TableSection").innerHTML = text
   else if(document.all)
    document.all.TableSection.innerHTML = text
   else if(document.layers) {
    document.TableSection.document.open();
    document.TableSection.document.write(text);
    document.TableSection.document.close();
    }
  } // writeTable()

this.msgBox = function _msgBox(mystring) {
   alert(mystring);
  } // msgBox()
 } // class myTable
</script>

<body onLoad="
  var theTable    = new myTable();
  theTable.writeTable();
">
the table:
 <div id="TableSection" ></div>
was here
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML mit Javascript-Objekt-Aufruf

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich generiere HTML mit einem Aufruf eines Javascript-Objekts (hier: "theTable"). Die JavaScript-Konsole meldet aber "theTable is not defined" - warum?

    weil das <tr>-Element über kein theTable-Objekt verfügt.

    Wenn man in das onMouseover dagegen this.theTable.msgBox('hello') schreibt erhält man "this.theTable has no properties" - dabei geht es ja nicht um Properties, sondern um einen Funktionsaufruf.

    Eine Funktion (bzw. Methode, um die es hier eigentlich geht) _ist_ ein Property.

    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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML mit Javascript-Objekt-Aufruf

      ulibaehr
      – Informationen zu den Bewertungsregeln

      Ich generiere HTML mit einem Aufruf eines Javascript-Objekts (hier: "theTable"). Die JavaScript-Konsole meldet aber "theTable is not defined" - warum?

      weil das <tr>-Element über kein theTable-Objekt verfügt.

      Wie komme ich denn dann vom <tr> auf das theTable-Objekt im <body>?
      Da muß es doch einen Weg geben ...

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. HTML mit Javascript-Objekt-Aufruf

        Cheatah
        – Informationen zu den Bewertungsregeln

        Hi,

        Wie komme ich denn dann vom <tr> auf das theTable-Objekt im <body>?
        Da muß es doch einen Weg geben ...

        nein, das ist mit der Abarbeitung der onload()-Methode gestorben (wenn auch vielleicht noch nicht aufgeräumt). Wenn Du das theTable-Objekt dem <tr>-Objekt zuweisen möchtest, musst Du während seiner Lebenszeit auch ein <tr>-_Objekt_ vorliegen haben und nutzen.

        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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. HTML mit Javascript-Objekt-Aufruf

          ulibaehr
          – Informationen zu den Bewertungsregeln

          Wenn Du das theTable-Objekt dem <tr>-Objekt zuweisen möchtest, musst Du während seiner Lebenszeit auch ein <tr>-_Objekt_ vorliegen haben und nutzen.

          Servus Cheatah
          vielen Dank für den Hinweis. Er hat mich auf die richtige Spur gebracht. Das Objekt ist einfach an der falschen Stelle erzeugt worden. Für die Nachwelt: So muß das Programm aussehen:

          <html>
          <head>
           <title>example</title>
          </head>
          <script language="JavaScript" >
            var theTable    = new myTable();

          function myTable() {
            this.writeTable = _writeTable
            this.msgBox = _msgBox
           } // class myTable

          function _msgBox(mystring) {
             alert(mystring);
            } // msgBox()

          function _writeTable() {
             var text = "";
             text = "<table border>";
             text += "<tr onMouseover="theTable.msgBox('hello')" >\n";
             text += "<td>ABC</td>";
             text += "</tr>";
             text += "</table>";
             if(document.getElementById)
              document.getElementById("TableSection").innerHTML = text
             else if(document.all)
              document.all.TableSection.innerHTML = text
             else if(document.layers) {
              document.TableSection.document.open();
              document.TableSection.document.write(text);
              document.TableSection.document.close();
              }
            } // writeTable()

          </script>
          <body onLoad="theTable.writeTable();">
          the table:
           <div id="TableSection" ></div>
          was here
          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. HTML mit Javascript-Objekt-Aufruf

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            vielen Dank für den Hinweis. Er hat mich auf die richtige Spur gebracht. Das Objekt ist einfach an der falschen Stelle erzeugt worden. Für die Nachwelt: So muß das Programm aussehen:

            Nö, sollte es nicht wie ich dir schon in meinem Hinweisen schrieb

            Struppi.

            --
            Javascript ist toll (Perl auch!)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. HTML mit Javascript-Objekt-Aufruf

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hat jemand eine Idee, wie dieses Verhalten zu erklären ist?

    also erstmal aus welcher Mottenkiste hast du den Code ausgegraben?

    <html>
    <head>
    <title>example</title>
    </head>
    <script language="JavaScript" >

    dir ist bekannt was bis alles hierhin fehlt?

    Nun zu deinem Problem.

    function myTable() {
      this.writeTable = function _writeTable() {
       var text = "";
       text = "<table border>";
       text += "<tr onMouseover="this.theTable.msgBox('hello') >\n";
       text += "<td>ABC</td>";
       text += "</table>";

    Mal abgesehen von der völlig sinnlosen Tabelle, bei dem mouseover ist this gleich dem <tr> Element, du rufst hier also [TR-Element].theTable.msgBox() auf.
    Damit ist dieses Verhalten/Fehlermeldung zu erklären.

    if(document.getElementById)
        document.getElementById("TableSection").innerHTML = text
       else if(document.all)
        document.all.TableSection.innerHTML = text
       else if(document.layers) {
        document.TableSection.document.open();
        document.TableSection.document.write(text);
        document.TableSection.document.close();
        }

    Ist zwar gut gemeint, aber ich bin 100% sicher das Netscape 4 Nutzer heutzutage JS ausgeschaltet haben, da sie auf jeder 2. Seite mit Fehlermeldungen zugeschissen werden (von den ganzen Abstürzen dabei nicht zu sprechen), du kannst (und wenn du deine Nerven und Code schonen willst, solltest du auch) ihn ignorieren.

    du solltest das ganze, mit document.createElement (s. selfhtml) und appendChild() realisieren. Das bietet dir mehr Möglichkeiten. hier mal dein Beispiel:

      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
      "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >  
    <title>writeTable</title>  
</head>  
<body>  
  
<html>  
<head>  
 <title>example</title>  
</head>  
<script type="text/javascript">  
  
function myTable()  
{  
    var obj = null;  
    this.writeTable = function()  
    {  
        var self = this;  
        var obj = document.createElement('span');  
        obj.style.border = '1px solid black';  
  
        obj.innerHTML = 'abc';  
        obj.onmouseover = function()  
        {  
            self.msgBox('Hallo');  
        }  
        document.getElementById('TableSection').appendChild( obj );  
    };  
  
    this.msgBox = function (mystring)  
    {  
         alert(mystring);  
    }; // msgBox()  
 } // class myTable  
  
window.onload = function()  
{  
  var theTable    = new myTable();  
  theTable.writeTable();  
  
}  
</script>  
  
<body >  
the table: <div id="TableSection" ></div>was here  
  
</body>  
</html>

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln