Artis: properties von area Element werden nicht erkannt

Hallo zusammen.
Ich hoffe ihr könnt mir helfen. Ich will Attribute eines area Elementes austauschen. dafür benutze ich dieses Script:

function area_koor(str) {
  var array = str.split("|");
  for(var i = 0; i < array.length; i++) {
    var array_temp = array[i].split("#");
    document.getElementById("area_"+array_temp[0]).setAttribute("coords", array_temp[1]);
  }
}

In der Variable str steht z.B. das hier:
0#35,100,70,135,35,170,0,135|1#105,100,140,135,105,170,70,135

Nun gibt es ca. 180 area Elemte die ungefähr so aussehen:
<area id="area_0" shape="poly" coords="35,100,70,135,35,170,0,135" alt="0" title="0">
<area id="area_1" shape="poly" coords="105,100,140,135,105,170,70,135" alt="1" title="1">

Aber das ganze will einfach nicht funktionieren. Ich hab den Fehler meines Erachtens auch eingeschränkt auf die Element-ID, also das "area_"+array_temp[0]
Da steht jedoch das richtige drin und wenn ich das testweise ausgefüllt schreibe alert(document.getElementById("area_0").getAttribute("coords"));
dann gibt er mir auch ein richtiges Ergebnis aus (area_0).

Meine Frage ist also, wieso erkennt er die Verbindung aus Zeichenkette und Variablenwert nicht als gültigen Wert? Ich hoffe das ihr mir das erklären könnt. Und für ein Lösung meines Problems wäre ich auch sehr dankbar

  1. hi,

    Da steht jedoch das richtige drin und wenn ich das testweise ausgefüllt schreibe alert(document.getElementById("area_0").getAttribute("coords"));
    dann gibt er mir auch ein richtiges Ergebnis aus (area_0).

    Was soll daran richtig sein?
    area_0 ist die ID deiner Area - aber nicht der Inhalt ihre coords-Attributes.

    Schon mal ohne setAttribute versucht?
    {elementreferenz}.coords = "...";

    http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#area

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Es ist richtig, das hab ich nachgeprüft. Wenn man schon Attribute lesen kann, kann man sie auch umschreiben. Mit der ID area_0 hab ich auf das Element zugeriffen und dessen Attribut "coords" ausgelesen, bzw. geändert. Naja, jedenfalls versucht.

      Habs nunmal mit deiner Methode versucht, die sicherlich auch funktionieren würde, aber da kommt immernoch
      Fehler: document.getElementById("area_" + array_temp[0]) has no properties

      Es liegt ganz sicher am "area_"+array_temp[0] da ich es ausgeschrieben "area_0" verändern und lesen kann.
      Ist es denn falsch? Oder wieso interpretiert JavaScript das nicht richtig?

      1. hi,

        Es liegt ganz sicher am "area_"+array_temp[0] da ich es ausgeschrieben "area_0" verändern und lesen kann.
        Ist es denn falsch?

        Hast du das etwa nicht kontrolliert?

        Oder wieso interpretiert JavaScript das nicht richtig?

        Javascript macht, was du him sagst.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Ja gut, dann sag mir doch warum "area_"+array_temp[0] (array_temp[0] = 0) nicht "area_0" ist... ich seh da einfach nicht durch. Wie schon gesagt ich hab durch alert überprüft das "area_"+array_temp[0] = "area_0" ist, nur scheinbar für Javascript nicht... und das verstehe ich ja nicht.
          Und ich habs ja auch zu testzwecken in eine variable geschrieben und dann diese als kennung benutzt. Aber auch das hat nicht funktioniert.
          Ich bin echt am verzweifeln :( Wenn ich das nicht hinbekomme dann war bisher alles umsonst *seufz*

          1. hi,

            Aber auch das hat nicht funktioniert.

            Tja, dann solltest du uns wohl mal ein vollständiges Online-Beispiel zeigen.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Ich hab leider nichts wo ich das online zeigen kann.
              Und mehr als das was ich gepostet habe ists auch nicht wo das problem ist. Jeder der sich das Script hier abspeichert wird wissen das es nicht funktioniert:

              <html>
              <head>
              <title>test</title>
              </head>
              <body>

              <script>
              var test_str = "0#35,100,70,135,35,170,0,135|1#105,100,140,135,105,170,70,135";
              area_koor(test_str);
              function area_koor(str) {
                var array = str.split("|");
                for(var i = 0; i < array.length; i++) {
                  var array_temp = array[i].split("#");
                  document.getElementById("area_"+array_temp[0]).coords = array_temp[1];
                }
              }
              </script>

              <map>
              <area id="area_0" shape="poly" coords="35,100,70,135,35,170,0,135" alt="0" title="0">
              <area id="area_1" shape="poly" coords="105,100,140,135,105,170,70,135" alt="1" title="1">
              </map>

              </body>
              </html>

              Das Script sollte so richtig erstellt sein. Ich meine, hier gibt es so viele Leute die "scheinbar" etwas von JavaScript verstehen und JavaScript gibts auch nicht erst seit gestern... Und ich kann mir nicht vorstellen das dieses Problem zum ersten Mal auftaucht. Mein Ausbilder hat mir früher oft gesagt: "Du bist sicher nicht der erste der genau dieses Problem hat, also frage nach" und diesen Rat beherzige ich immer wenn ich nicht weiterkomme (nachdem ich selber rumprobiert habe.

              Nur ich komme beim besten Wissen und Gewissen nicht weiter *seufz*
              Ich hoffe wirklich das mir jemand helfen kann.

              1. hi,

                Und mehr als das was ich gepostet habe ists auch nicht wo das problem ist. Jeder der sich das Script hier abspeichert wird wissen das es nicht funktioniert

                Du Scherzkeks.

                Dass du versuchst, auf das Element zuzugreifen, bevor es existiert, hätte dir aber auch auffallen können ...

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. hmmm.. ja, in dem Beispielscript stimmt das leider und wenn mans umdreht dann funktionierts auch...
                  Aber in meinem richtigen Script funktionierts leider nicht... ich poste das mal... auch wenn ichs nicht gerne machen wollte, aber sonst kann mir ja nicht geholfen werden.
                  Ich danke dir jedenfalls schonmal das du mir so sehr hilfst^^

                  <script type="text/javascript">
                    map_x = 0;
                    map_y = 0;
                    state = 0;

                  function scroll_map(x,y) {
                      if(x == 0 && y == 0) {
                        map_x = 0; map_y = 0;
                      } else {
                        map_x += x; map_y += y;
                      }
                      wait();
                      macheRequest("koor.php","ID=5&x="+map_x+"&y="+map_y);
                    }

                  var http_request = false;

                  function macheRequest(url,send) {
                      http_request = false;

                  if (window.XMLHttpRequest) { // Mozilla, Safari,...
                        http_request = new XMLHttpRequest();
                        if (http_request.overrideMimeType) {
                          http_request.overrideMimeType("text/xml");
                        }
                      } else if (window.ActiveXObject) { // IE
                        try {
                          http_request = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                          try {
                            http_request = new ActiveXObject("Microsoft.XMLHTTP");
                          } catch (e) {}
                        }
                      }

                  if (!http_request) {
                        alert("Ende :( Kann keine XMLHTTP-Instanz erzeugen");
                        return false;
                      }

                  http_request.open("POST", url, true);
                      http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                      http_request.onreadystatechange = alertInhalt;
                      http_request.send(send);
                    }

                  function alertInhalt() {
                      if (http_request.readyState == 4) {
                        if (http_request.status == 200) {
                          area_koor(http_request.responseText);
                        } else {
                          alert("Bei dem Request ist ein Problem aufgetreten.");
                        }
                      }
                    }

                  function area_koor(str) {
                      var array = str.split("|");
                      for(var i = 0; i < array.length; i++) {
                        var array_temp = array[i].split("#");
                        document.getElementById("area_"+array_temp[0]).coords = array_temp[1];
                      }
                    }

                  function wait() {
                      window.setTimeout("refresh()",50);
                    }

                  function refresh() {
                      var rand = new Date();
                      var temp = ""+Math.random(20);
                      temp1 = temp.substr(2, 2);
                      var temp = ""+Math.random(20);
                      temp2 = temp.substr(2, 2);
                      document.getElementById("img_map").src = "image_map.php?ID=5&x="+map_x+"&y="+map_y+"&rand="+rand.getTime()+(temp1*temp2)+temp1+temp2;
                    }

                  </script>

                  <div id="map">
                  <map name="map">
                  <area id="area_0" onclick="field(0)" shape="poly" coords="35,100,70,135,35,170,0,135" alt="0" title="0" />
                  etc.
                  </map>
                  </div>

                  ok, zur erklärung:
                  wenn ich ein bild bewege, dann wird die Funktion scroll_map aufgerufen, die dann alles in bewegung setzt.
                  In der Datei koor.php werden neue koordinaten für die area erstellt, und zwar für jedes der area ein neues. Diese sollen dann eigentlich ausgetauscht werden. und da das erst gemacht wird nachdem die area geschrieben werden sollte es dann auch funktionieren... eigentlich. Wie gesagt, durch das umstellen hats nicht funktioniert...

                  1. hi,

                    hmmm.. ja, in dem Beispielscript stimmt das leider und wenn mans umdreht dann funktionierts auch...
                    Aber in meinem richtigen Script funktionierts leider nicht...

                    Warum postest du solchen Code, der sich signifikant vom problematischen unterscheidet?

                    ich poste das mal...

                    Da sieht man vermutlich auch wieder nur die Hälfte.

                    (Bspw. wann und wo die Funktionen aufgerufen werden, ist da auch wieder nicht erkennbar, was der AJAX-Request zurückliefert auch nicht ...
                    Ohne vollständiges Online-Beispiel ist mir das zu sehr Kaffeesatzleserei.)

                    gruß,
                    wahsaga

                    --
                    /voodoo.css:
                    #GeorgeWBush { position:absolute; bottom:-6ft; }
                    1. Es ist genau mein Problem. Was koor zurückliefert hab ich schon in früheren Posts gezeigt, denn das sind echt Daten gewesen.
                      Wie gesagt, es handelt sich ja nur um das "area_"+array_temp[0] problem.... was anderes kann es einfach nicht sein, da wie gesagt mit document.getElementById("area_0").coords genau das richtige passiert... aber ich scheine das wohl irgendwie selber herausfinden zu müssen...

                      Und das Script, wenn du es dir nochmal genau anschaust, ist nicht anders. Nur etwas mehr, was ich vorher für nicht nötig gehalten habe. Denn da sind nur der aufruf des HTTP Request mehr drin... und der gibt das 0#35,100,70,135,35,170,0,135|1#105,100,140,135,105,170,70,135 etc. wieder... aber was solls...

                      trotzdem danke für deine Hilfe
                      Ciao Artis

                    2. Ich hab den Fehler nun nach intensivem Suchen gefunden. Im Grunde war es ganz einfach und hatte nichts mit meinem Script zu tun.
                      Wärend des HTTPRequestes müssen am anfang unsaubere Zeichen hineingekommen sein. Jedenfalls sind am Anfang des ersten Eintrages im Array, noch vor der 0# zwei Zeichen die "unsichtbar" sind. Vielleicht leerzeichen, bin mir aber noch nicht sicher.
                      Jedenfalls ist es klar das er bei "area_  0" abbricht. War aber sehr schwierig zu sehen, da der das kaum angezeigt hat.

                      Ich danke dir nochmal für all deine Mühen^^ Du hast immer weiter versucht mir zu helfen, obwohl ich mit der Zeit etwas aufgebracht war^^" Es tut mir leid.
                      Liebe grüße, Artis

                      1. hi,

                        Wärend des HTTPRequestes müssen am anfang unsaubere Zeichen hineingekommen sein. Jedenfalls sind am Anfang des ersten Eintrages im Array, noch vor der 0# zwei Zeichen die "unsichtbar" sind. [...]
                        Jedenfalls ist es klar das er bei "area_  0" abbricht.

                        Also das, was du angeblich ganz genau kontrolliert hast :-)

                        Vielleicht leerzeichen, bin mir aber noch nicht sicher. [...]
                        War aber sehr schwierig zu sehen, da der das kaum angezeigt hat.

                        Vielleicht die BOM, wenn du UTF-8 verwendest?

                        gruß,
                        wahsaga

                        --
                        /voodoo.css:
                        #GeorgeWBush { position:absolute; bottom:-6ft; }
                        1. Vielleicht die BOM, wenn du UTF-8 verwendest?

                          Ich weiß das ich noch etwas Nachholbedarf hab in einigen Bereichen, und BOM und UTF-8 sagt mir nicht viel. UTF-8 ist doch eine Formatierung des Textes? Vielleicht kannst du mir ja noch erklären was du genau damit meinst, bzw. wie man das einstellt?^^

                          Gruß Artis

                          1. Hello out there!

                            Ich weiß das ich noch etwas Nachholbedarf hab in einigen Bereichen, und BOM und UTF-8 sagt mir nicht viel.

                            Wikipedia hilft dir.

                            See ya up the road,
                            Gunnar

                            --
                            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
                      2. Hallo Artis,

                        Jedenfalls sind am Anfang des ersten Eintrages im Array, noch vor der 0# zwei Zeichen die "unsichtbar" sind. Vielleicht leerzeichen, bin mir aber noch nicht sicher.

                        Das kann davon kommen, wenn man sich den AJAX-Code aus einem Tutorial kopiert das nur im PDF-Format vorliegt. Das ist mir auch bei meinen ersten Gehversuchen mit AJAX passiert und ich habe einen halben Tag nach dem unsichtbaren Fehler gesucht, bis ich endlich draufkam.

                        Gruß Gernot