Problem mit Event Handler

[diana]

Ich habe folgendes problem . Ich erstelle dynamisch ein x-y Kordinatengitter . In diesem kann man auf die Felder klicken und bekommt dann ausgegeben über den event handler auf welches Feld man geklickt hat . Es funktioniert auch . Sobald ich aber vor dem dynamischen Aufbau folgendes definiere
topdiv = topdiv + 1200;
funktioniert es nicht mehr , woran kann das liegen ? Bin am Verzweifeln da ich alles mögliche schon probiert habe aber einfach nicht rausbekomme woran es liegt .
topdiv und leftdiv werden am anfang der js datei einfach initialiesiert mit ( auserhalb jeder funktion ) der codeabschnitt liegt in einer funktion di erst nach onload der seite ausgeführt wird . mit topdiv und leftdiv lege ich einfach den abstand der div nach oben bzw mit leftdiv den abstand jedes div nach links fest
 var topdiv =0;
 var leftdiv =0;

//---------- codeausschnitt
topdiv = topdiv + 1200;
 for(i=0;i<20;i++){

for(j=0;j<30;j++){
   divmap = document.createElement('div');
   divmap.setAttribute("id",i+"_"+j);
   divmap.style.position ="absolute";
   divmap.style.width = "60px";
   divmap.style.height = "60px";
   divmap.style.top = topdiv+"px" ;
   divmap.style.left= leftdiv+"px";
   divmap.ondblclick = function() { mapcordanwahl(this.attributes.id.nodeValue); }

imgmap = document.createElement("img");
   imgmap.setAttribute("id", i+"I"+j);
        imgmap.src = "empty.gif"

imgmap.style.width = "60px";
   imgmap.style.height = "60px";
   divmap.appendChild(imgmap);

leftdiv =leftdiv+60;

document.getElementById("mapindiv").appendChild(divmap);
  }
  leftdiv = 0;
  topdiv = topdiv +  60;

}

[berdn]

Hallo Diana,

ich kenne den anderen Code nicht, würde jetzt mal spontan versuchen ...
Statt:
topdiv = topdiv + 1200;

Dann:
topdiv = parseInt(topdiv) + 1200;

Du musst ja irgendwas mit topdiv machen sonst hättest Du ihn ja auch geleich mit topdiv = 1200 setzen können.

Liebe Grüße,

Bernd

PS: Vielleicht ist der Code den Du nicht zeigst des Rätsels Lösung ?

[diana]

ich habe den code nun folgendermasen gekürzt und das komische ist wenn ich
 var topdiv = 0;
 var leftdiv = 0;
angebe am anfang der funktion screenaufbauen dann funktioniert es ,der eventhandler wird eingerichtet und ausgeführt , wenn ich aber

var topdiv = 600;
 var leftdiv = 600;

angebe dann nicht ? woran kann es liegen .

//-------- js code

function screenaufbauen(){
 bildschirmeinrichten();

var topdiv = 600;
 var leftdiv = 600;

for(i=0;i<20;i++){

for(j=0;j<30;j++){
   divmap = document.createElement('div');
   divmap.setAttribute("id",i+"_"+j);
   divmap.style.position ="absolute";
   divmap.style.width = "60px";
   divmap.style.height = "60px";
   divmap.style.top = topdiv+"px" ;
   divmap.style.left= leftdiv+"px";
   divmap.ondblclick = function() { mapcordanwahl(this.attributes.id.nodeValue); }

imgmap = document.createElement("img");
   imgmap.setAttribute("id", i+"I"+j);
        imgmap.src = "empty.gif"

imgmap.style.width = "60px";
   imgmap.style.height = "60px";

divmap.appendChild(imgmap);

leftdiv =leftdiv+60;

document.getElementById("mapindiv").appendChild(divmap);
  }
  leftdiv = 600;
  topdiv = topdiv +  60;

}

//damit am anfang die map an den richtigen cordinaten angezeigt wird
 scrollenonloadside();
 updatetop = leftdis;
 updateleft = topdis;

}

// die function scrollenonloadside();

function scrollenonloadside () {

topdis += 0;
  cliprecone -= 0;
  cliprectress -= 0;
  document.getElementById("map").style.top = topdis+"px";
  document.getElementById("map").style.left = leftdis+"px";
  document.getElementById("map").style.clip = "rect("+cliprecone+"px, "+cliprectwo+"px, "+cliprectress+"px, "+cliprefour+"px)";

return;
}

// die function bildschirmeinrichten()

function bildschirmeinrichten(){

var x,y;
 if (self.innerHeight)
  // alle auser IE
 {
  x = self.innerWidth -30;
  y = self.innerHeight -30;
 }
 else if (document.documentElement && document.documentElement.clientHeight)
  // IE 6
 {
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
 }
 else if (document.body) // andere IE
 {
  x = document.body.clientWidth;
  y = document.body.clientHeight;
 }

maxbreite   = x;
 maxhoehe    = y;

bildschirmeinrichtenmain();
 //mainnavimenü richtig positionieren
 document.getElementById("navimainmenu").style.top = maxhoehe - 200;
 document.getElementById("mapubersicht").style.top = maxhoehe - 200;
 document.getElementById("mapubersicht").style.left= maxbreite- 400;
 document.getElementById("mappfeile").style.left= maxbreite- 100;

}

//und die function bildschirmeinrichtenmain(); diese wird in der html datei defieniert damit ich sie dynamisch ändern kann

function bildschirmeinrichtenmain(){
  xverschiebung=1200;
  yverschiebung=600;

topdis  = - xverschiebung;
  leftdis = - yverschiebung;
  //hoch-runterfahren
  cliprecone = xverschiebung;
  cliprectwo = maxbreite + yverschiebung;
  //hoch-runterfahren
  cliprectress = maxhoehe + xverschiebung;
  cliprefour = yverschiebung;
  mapbewegen =0;
  boxbesteht = 0;

}

//hier die stelle wo ich es in den html körper einfüge
<div id="mapbevordiv" style="position:relative; top:0px; left:0px;">
  <div id="map" style="position:absolute; z-index:2; top:0px; left:0px; overflow:hidden; clip:rect(0px, 800px, 560px, 0px);" >
   <div id="mapindiv" style="position:relative; top:0px; left:0px; width:20000; height:30000; background-image:url(englandtest.gif);">

</div>
  </div>
 </div>

[Struppi]

Ich habe folgendes problem . Ich erstelle dynamisch ein x-y Kordinatengitter . In diesem kann man auf die Felder klicken und bekommt dann ausgegeben über den event handler auf welches Feld man geklickt hat . Es funktioniert auch . Sobald ich aber vor dem dynamischen Aufbau folgendes definiere
topdiv = topdiv + 1200;
funktioniert es nicht mehr , woran kann das liegen ? Bin am Verzweifeln da ich alles mögliche schon probiert habe aber einfach nicht rausbekomme woran es liegt .

Funktioniert nicht mehr heißt?
Wie lautet die Fehlermeldung?
Welchen Browser benutzt du?
...

//---------- codeausschnitt
topdiv = topdiv + 1200;
for(i=0;i<20;i++){

for(j=0;j<30;j++){

Globale Variabeln solltest du immer vermeiden!
Globale Schleifenzähler sind aber noch gefährlicher, du musst in JS eine Variabel mit var lokal machen.

divmap = document.createElement('div');
   divmap.setAttribute("id",i+"_"+j);

setAtrribute ist hier nicht nötig und bringt manchmal auch den IE ins schlingern, es reicht absolut wenn du die Zuweisung so schreibst:

divmap.id = i + "_" + j;

Aber ids dürfen nicht mit einer Zahl beginnen.

divmap.style.position ="absolute";
   divmap.style.width = "60px";
   divmap.style.height = "60px";
   divmap.style.top = topdiv+"px" ;
   divmap.style.left= leftdiv+"px";

divmap.ondblclick = function() { mapcordanwahl(this.attributes.id.nodeValue); }

was ist den attributes?
Was soll der Parameter übergeben? Die ID?
das wäre dann this.id
Aber wozu brauchst du die?
Dir ist klar, dass this das Objekt ist und du die nicht mehr mit getElement.. aus dem Dokument holen musst?

leftdiv =leftdiv+60;

übrigens kannst du in den meisten Programmiersprachen das abkürzen:
leftdiv += 60;

Struppi.