Thomas Dose: onmouseover mit der write-Methode

SELF-Forum

onmouseover mit der write-Methode

Thomas Dose
– Informationen zu den Bewertungsregeln

Ich habe folgenden code geschrieben.
Eine Tabelle wird generiert. Die einzelnen Zellen bekommen eine id. Beim Überfahren mit der Maus soll jede Zelle ihre Farbe ändern.
Die Zuordnung der id funktioniert, was ich mit der alert-Funktion überprüft habe. Der Aufruf der Funktion "Markieren" funktioniert aber überhaupt nicht.
Wer kann helfen?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Tabelle generieren</title>
    <script type='text/javascript'>

<!--

function LadenMZ() {

document.write('<table border="1" cellpadding="5" cellspacing="0">');

document.write('<tr>');
    document.write('<td id = "Zelle110" onmouseover = "Markieren(1,10)" onmouseout = "Normalisieren(1,10)" onclick = "Aktivitaet(1,10)"><p id = "Raster110">Z110</p></td>');
    document.write('<td id = "Zelle111" onmouseover = "Markieren(1,11)" onmouseout = "Normalisieren(1,11)" onclick = "Aktivitaet(1,11)"><p id = "Raster111">Z111</p></td>');
    document.write('<td id = "Zelle112" onmouseover = "Markieren(1,12)" onmouseout = "Normalisieren(1,12)" onclick = "Aktivitaet(1,12)"><p id = "Raster112">Z112</p></td>');
    document.write('<td id = "Zelle113" onmouseover = "Markieren(1,13)" onmouseout = "Normalisieren(1,13)" onclick = "Aktivitaet(1,13)"><p id = "Raster113">Z113</p></td>');
    document.write('<td id = "Zelle114" onmouseover = "Markieren(1,14)" onmouseout = "Normalisieren(1,14)" onclick = "Aktivitaet(1,14)"><p id = "Raster114">Z114</p></td>');
    document.write('</tr>');

document.write('<tr>');
    document.write('<td id = "Zelle210" onmouseover = "Markieren(2,10)" onmouseout = "Normalisieren(2,10)" onclick = "Aktivitaet(2,10)"><p id = "Raster210">Z210</p></td>');
    document.write('<td id = "Zelle211" onmouseover = "Markieren(2,11)" onmouseout = "Normalisieren(2,11)" onclick = "Aktivitaet(2,11)"><p id = "Raster211">Z211</p></td>');
    document.write('<td id = "Zelle212" onmouseover = "Markieren(2,12)" onmouseout = "Normalisieren(2,12)" onclick = "Aktivitaet(2,12)"><p id = "Raster212">Z212</p></td>');
    document.write('<td id = "Zelle213" onmouseover = "Markieren(2,13)" onmouseout = "Normalisieren(2,13)" onclick = "Aktivitaet(2,13)"><p id = "Raster213">Z213</p></td>');
    document.write('<td id = "Zelle214" onmouseover = "Markieren(2,14)" onmouseout = "Normalisieren(2,14)" onclick = "Aktivitaet(2,14)"><p id = "Raster214">Z214</p></td>');
    document.write('</tr>');

document.write('<tr>');
    document.write('<td id = "Zelle310" onmouseover = "Markieren(3,10)" onmouseout = "Normalisieren(3,10)" onclick = "Aktivitaet(3,10)"><p id = "Raster310">Z310</p></td>');
    document.write('<td id = "Zelle311" onmouseover = "Markieren(3,11)" onmouseout = "Normalisieren(3,11)" onclick = "Aktivitaet(3,11)"><p id = "Raster311">Z311</p></td>');
    document.write('<td id = "Zelle312" onmouseover = "Markieren(3,12)" onmouseout = "Normalisieren(3,12)" onclick = "Aktivitaet(3,12)"><p id = "Raster312">Z312</p></td>');
    document.write('<td id = "Zelle313" onmouseover = "Markieren(3,13)" onmouseout = "Normalisieren(3,13)" onclick = "Aktivitaet(3,13)"><p id = "Raster313">Z313</p></td>');
    document.write('<td id = "Zelle314" onmouseover = "Markieren(3,14)" onmouseout = "Normalisieren(3,14)" onclick = "Aktivitaet(3,14)"><p id = "Raster314">Z314</p></td>');
    document.write('</tr>');

document.write('</table>');

document.close();

var testtext = document.getElementById("Raster314").firstChild.nodeValue;
    alert(testtext);

};

function Markieren(Zeile,Spalte)
    {
document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffff00');
    };

function Normalisieren(Zeile,Spalte)
    {
document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffffff');
    };

function Aktivitaet(Zeile,Spalte)
    {
    alert("Zeile: " + Zeile + " Spalte: " + Spalte);
    };

//-->
    </script>
</head>

<body style="background-color:#FFFFFF; padding:5px"
      onload="LadenMZ()">
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onmouseover mit der write-Methode

    Daniel Petratsch
    – Informationen zu den Bewertungsregeln

    Hi Thomas

    Funktioniert überhaupt kein Javascript Event ? Ich weiss jetzt nicht genau oba es mit deiner Methode möglich ist Events zu definieren, ich glaube dies geht nachträglich nur übers DOM, sieh mal hier nach:
    http://selfhtml.teamone.de/dhtml/modelle/dom.htm

    Du musst aber aufpassen, der Internet Explorer hat (wie immer) noch viele Probleme damit, zumal er einige nachträglich übers DOM eingebundene Events noch überhaupt nicht unterstützt.

    freundliche Grüsse,
    Daniel

    --
    Das ist der ganze Jammer, die Dummen sind immer so sicher und die Gescheiten so voller Zweifel.
    [Bertrand Russell]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onmouseover mit der write-Methode

      Thomas Dose
      – Informationen zu den Bewertungsregeln

      Hi Thomas

      Funktioniert überhaupt kein Javascript Event ? Ich weiss jetzt nicht genau oba es mit deiner Methode möglich ist Events zu definieren, ich glaube dies geht nachträglich nur übers DOM, sieh mal hier nach:
      http://selfhtml.teamone.de/dhtml/modelle/dom.htm

      Du musst aber aufpassen, der Internet Explorer hat (wie immer) noch viele Probleme damit, zumal er einige nachträglich übers DOM eingebundene Events noch überhaupt nicht unterstützt.

      freundliche Grüsse,
      Daniel

      Hallo!

      Vielen Dank erst mal.

      Ich habe den code in Anlehnung an deinen Tipp wie folgt geändert.
      Funktioniert aber immer noch nicht.

      Thomas

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
          <title>Tabelle generieren</title>
          <script type='text/javascript'>

      <!--

      function Markieren()
          {
          alert("TEST1");
          /*
          document.getElementById("Zelle"+Zeile+Spalte).setAttribute('bgColor','#ffff00');
          */
          }

      function Normalisieren()
          {
          alert("TEST2");
          }

      function Aktivitaet()
          {
          alert("TEST3");
          /*
          alert("Zeile: " + Zeile + " Spalte: " + Spalte);
          */
          }

      function LadenMZ() {

      document.write('<table border="1" cellpadding="5" cellspacing="0">');

      document.write('<tr id = "Zeile1">');
          document.write('<td id = "Zelle110" width = 150><p id = "Raster110">Z110</p></td>');
          document.write('<td id = "Zelle111" width = 150><p id = "Raster111">Z111</p></td>');
          document.write('<td id = "Zelle112" width = 150><p id = "Raster112">Z112</p></td>');
          document.write('<td id = "Zelle113" width = 150><p id = "Raster113">Z113</p></td>');
          document.write('<td id = "Zelle114" width = 150><p id = "Raster114">Z114</p></td>');
          document.write('</tr>');

      document.write('<tr id = "Zeile2">');
          document.write('<td id = "Zelle210" width = 150><p id = "Raster210">Z210</p></td>');
          document.write('<td id = "Zelle211" width = 150><p id = "Raster211">Z211</p></td>');
          document.write('<td id = "Zelle212" width = 150><p id = "Raster212">Z212</p></td>');
          document.write('<td id = "Zelle213" width = 150><p id = "Raster213">Z213</p></td>');
          document.write('<td id = "Zelle214" width = 150><p id = "Raster214">Z214</p></td>');
          document.write('</tr>');

      document.write('<tr id = "Zeile3">');
          document.write('<td id = "Zelle310" width = 150><p id = "Raster310">Z310</p></td>');
          document.write('<td id = "Zelle311" width = 150><p id = "Raster311">Z311</p></td>');
          document.write('<td id = "Zelle312" width = 150><p id = "Raster312">Z312</p></td>');
          document.write('<td id = "Zelle313" width = 150><p id = "Raster313">Z313</p></td>');
          document.write('<td id = "Zelle314" width = 150><p id = "Raster314">Z314</p></td>');
          document.write('</tr>');

      document.write('</table>');

      document.close();

      var Zelle110 = document.getElementById("Zelle110");
          Zelle110.addEventListener("mouseover", Markieren, true);
          Zelle110.addEventListener("mouseout", Normalisieren, true);
          Zelle110.addEventListener("click", Aktivitaet, true);

      }

      //-->
          </script>
      </head>

      <body style="background-color:#FFFFFF; padding:5px"
            onload="LadenMZ()">
      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. onmouseover mit der write-Methode

    XaraX Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Thomas,

    hast Du schon mal über eine for-Schleife nachgedacht? (Verkürzt Ladezeit/traffic ungemein ;)
    Woran es liegen mag, WEISS ICH NICHT, will es auch nicht wissen.

    Nur mal kurz gefragt:

    function neu(v,a)
      {
      alert(v+a)
      }
    <body onLoad="neu(10,10)">

    Wenn das 1010 ergibt, will ich diesen Browser auch haben!

    Zu Deiner Farbänderung kann ich Dir nur empfehlen onMouseover="this.setAttribute('bgColor','#ffff00')" zu nutzen. Damit ist der Grund für den Fehler nicht isoliert, ABER ES FUNZELT!

    Noch was: Warum maskierst Du " ????????????????????????????????

    Gruß aus Berlin!
    eddi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onmouseover mit der write-Methode

      Thomas Dose
      – Informationen zu den Bewertungsregeln

      Ich habe ja Texte und Ziffern mit dem Pluszeichen verbunden und so den Zellennamen bestimmt. Ziffern werden ja einfach angehängt und nicht zusammengezählt.
      Den "komplizierten" code mit der Zellen-id habe ich genommen, weil ich später beim Überfahren der Zelle die ganze Zeile der generierten Tabelle markieren will.

      Thomas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln