DOM Manipulation

[shuthichi]

Hallo Forum,

ich möchte mein DOM per JavaScript manipulieren.
Wenn ich einem <A> oder einem <DIV> Element jedoch ein onmouseover-Attribut anhängen will scheitere ich.

Im FF2 + FF3 funktioniert das Script. Im IE6 + IE7 jedoch nicht.
Kann mir jemand nen Tip geben.

  
function initialize(){  
  var calendar  = document.getElementById("calendar");  
  var days  = 24;  
  var counter  = 1;  
  
  for (counter; counter<=days; counter++){  
    var door   = document.createElement("a");  
    var doorNr = document.createTextNode(counter);  
  
    door.id = "door"+counter;  
    door.className = "door_noborder";  
    door.setAttribute("onmouseover","this.className = 'door_border'");  
    door.setAttribute("onmouseout","this.className = 'door_noborder'");  
    door.appendChild(doorNr);  
    calendar.appendChild(door);  
  }  
}  

Viele Grüße
Niko

[Hopsel]

Hi shuthichi!

Hallo Forum,

ich möchte mein DOM per JavaScript manipulieren.
Wenn ich einem <A> oder einem <DIV> Element jedoch ein onmouseover-Attribut anhängen will scheitere ich.

Der IE hat Probleme damit. Eventuell kannst du das Attribut mit door.onmouseover = "this.className = 'door_border'"; setzen.

Aber warum möchtest du das überhaupt?
Gib den Links doch einfach eine Klasse und arbeite im CSS mit der Pseudoklasse :hover.

MfG H☼psel

[JürgenB]

Hallo Hopsel,

... Eventuell kannst du das Attribut mit door.onmouseover = "this.className = 'door_border'"; setzen.

ein String als Eventhandler?

Gib den Links doch einfach eine Klasse und arbeite im CSS mit der Pseudoklasse :hover.

für onmousemove?

Gruß, Jürgen

[JürgenB]

für onmousemove?

sorry, hab mich verlesen. Aber die neue Brille ist schon in Arbeit.

Gruß, Jürgen

[JürgenB]

Hallo shuthichi,

door.setAttribute("onmouseover","this.className = 'door_border'");

versuch mal

door.onmousemove=function() { this.className = 'door_border' } ;

calendar.appendChild(door);

Advent, Advent, ein Lichtlein brennt ... oder Alle Jahre wieder ...

Gruß, Jürgen

[JürgenB]

door.onmousemove=function() { this.className = 'door_border' } ;

onmouseover

sorry, verlesen.

Gruß, Jürgen

[shuthichi]

Danke für eure Hilfe!

Ich habe in der Zwischenzeit diesen Artikel gefunden: http://www.peterkropff.de/tutorials/js_dom_2/links_generieren.htm

Ich habe das Problem jetzt so gelöst:

  
function initialize(){  
  var calendar = document.getElementById("calendar");  
  var days     = 24;  
  var counter  = 1;  
  
  for (counter; counter<=days; counter++){  
    var door = document.createElement("a");  
    var doorNr = document.createTextNode(counter);  
  
    door.id = "door"+counter;  
    door.setAttribute('name', "door"+counter);  
    door.className = "door_noborder";  
    door.onmouseover = function () {this.className="door_border";}  
    door.onmouseout = function () {this.className="door_noborder";}  
    door.appendChild(doorNr);  
    calendar.appendChild(door);  
  }  
}  

Funktioniert jetzt in FF2, FF4, IE6, IE7.
@Jürgen: die 24 hat mich wohl verraten ;-)

[JürgenB]

Hallo shuthichi,

@Jürgen: die 24 hat mich wohl verraten ;-)

nicht nur, denn ich kenne nicht viele Ereignisse, bei denen ein Kalender mir Türen benötigt wird.

Gruß, Jürgen

[Gunnar Bittersmann]

@@shuthichi:

var counter  = 1;
  for (counter; counter<=days; counter++){
   // ...
  }

Die Anweisung counter; soll was bewirken? Dafür könntest du auch schreiben:

  var counter = 1;  
  for (; counter <= days; counter++)  
  {  
   // ...  
  }

Üblich ist aber die Schreibweise

  for (var counter = 1; counter <= days; counter++)  
  {  
   // ...  
  }

door.onmouseover = function () {this.className="door_border";}
    door.onmouseout = function () {this.className="door_noborder";}

Auch diese Zeilen sollten mit Semikola abgeschlossen werden:

    door.onmouseover = function () {this.className = "door_border";};  
    door.onmouseout = function () {this.className = "door_noborder";};

Live long and prosper,
Gunnar