✔ Objektnamen als Variable übergeben?

Z

Zerberus777

Mitglied
Hallo,

ich habe folgendes vor: Ich habe zwei DIV, welche bei mouseover eine Funktion aufrufen. In dieser Funktion sollen in Abhängigkeit des gewählten DIV für ein Objekt eine Eigenschaft verändert werden. Den jeweiligen Namen des Objektes will ich in der Funktion als Variable übergeben. Leider habe ich bisher trotz googliger Recherche keinen Erfolg damit gehabt, die übergebene Variable als Objektnamen zu verwenden.

Kann mir bitte Jemand helfen?

function toggle (name) {name.eigenschaft=tauschen;}

<div id="bild1" onmouseover="toggle(rahmen1)" onmouseout="toggle(rahmen1)"></div>
<div id="bild2" onmouseover="toggle(rahmen2)" onmouseout="toggle(rahmen2)"></div>

(Der Quelltext macht nicht viel Sinn, soll aber meine grundsätzliche "Konstruktion" verdeutlichen.)

Gruß

Zerberus
 
Hi Zerberus,
bitte nutze ab dem nächsten mal die Code-Tags, das erleichtert das lesen von Quellcode (vor allen bei Komplexeren Codes).

Anhand deiner kleinen "Beispiel Funktion"
Javascript: 
function toggle( name ) {
    document.getElementsByName( name ).eigenschaft=tauschen;
    ...
}

Alternativ kannst du mittels document.getElementsById nutzen, um die Elemente mittels der Id anzusprechen.
 
Hallo merzi86,

danke für Deine Antwort. Leider funktioniert es nicht.

Ich habe auf Grundlage von https://developers.google.com/maps/documentation/javascript/examples/marker-animations?hl=de eine Website geschrieben (im Anhang test1), welche funktioniert wie sie soll. Allerdings wird für jeden Marker eine eigene Funktion toggleBounce1,2,3 usw. verwendet.
Ich möchte jedoch nur eine allgemeine Funktion toggleBounce verwenden, der ich beim Aufruf als Parameter die entsprechenden Marker und Div mitgebe (im Anhang test2).
In der Funktion toggleColor funktioniert es, aber bei toggleBounce meldet JS "TypeError: document.getElementsByName(...).getAnimation is not a function".
Was kann man da machen?

Gruß

Zerberus
 

Anhänge

Ohne es genauer angesehen zu haben, fällt mir auf, dass getElementsByName() ein Array liefert. Je nachdem, was Du vorhast, musst Du über dieses Array iterieren oder, wenn Du nur ein Element bearbeiten willst, ebenfalls getElementById() benutzen.
Edit: Habe noch etwas genauer hingesehen und bemerkt, dass Du als selectMarker Objekte übergibst. In dem Fall brauchst Du weder getElementsByName() noch getElementById() sondern müsstest direkt die Funktion darauf aufrufen können, sofern sie für dieses Objekt definiert ist.
 
Zuletzt bearbeitet:
Ich habe es mir etwas genauer angesehen: Die Objekte waren in der Funktion toggleBounce() nicht als Objekte sondern als Strings sichtbar. Das liegt wahrscheinlich daran, dass diese innerhalb der Funktion initialize() definiert sind und beim Aufruf von toggleBounce nicht mehr sichtbar sind. Ich habe es mal so gelöst, dass ich die Funktion toggleBounce() und das Registrieren der Events in die Funktion initialize() gelegt habe.
So funktioniert es bei mir:
Code: 
function initialize() {
function toggleBounce(selectDiv, selectMarker) {
if (selectMarker.getAnimation() != null) {
selectMarker.setAnimation(null);
document.getElementById(selectDiv).style.background="green";
} else {
selectMarker.setAnimation(google.maps.Animation.BOUNCE);
document.getElementById(selectDiv).style.background="red";
}
}
var mapOptions = {
zoom: 12,
center: berlin,
mapTypeId: google.maps.MapTypeId.HYBRID
};

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

markberlin1 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin1
});
markberlin2 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin2
});
markberlin3 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin3
});

google.maps.event.addListener(markberlin1, 'mouseover', function() {toggleBounce(berlin1,markberlin1)});
google.maps.event.addListener(markberlin2, 'mouseout', function() {toggleBounce(berlin2,markberlin2)});
google.maps.event.addListener(markberlin3, 'mouseover', function() {toggleBounce(berlin3,markberlin3)});
google.maps.event.addListener(markberlin4, 'mouseout', function() {toggleBounce(berlin4,markberlin4)});
google.maps.event.addListener(markberlin5, 'mouseover', function() {toggleBounce(berlin5,markberlin5)});
google.maps.event.addListener(markberlin6, 'mouseout', function() {toggleBounce(berlin6,markberlin6)});
}
Mit den Farben das funktionierte auch noch nicht so richtig. Habe ich jetzt so:
Code: 
  function toggleColor(selectDiv) {
  sty = document.getElementById(selectDiv).style;

  if (sty.backgroundColor == "green" || sty.backgroundColor == "") {
  sty.backgroundColor = "red";
  } else {
  sty.backgroundColor = "green";
  }
  }
(beim ersten Aufruf ist die Hintergrundfarbe ein Leerstring bis man sie mit JS gesetzt hat.)

Edit: Ich sehe gerade, dass Du die Variablen für die Marker außerhalb von initialize() definiert hast. D. h. an der Sichtbarkeit kann es nicht gelegen haben. Funktioniert auch, wenn man toggleBounce() außerhalb von initialize() definiert. Wahrscheinlich war dann der Grund die Notation der Callbacks.
 
Zuletzt bearbeitet:
Hallo Sempervivum,

danke für Deine Mühe. Mit Deiner Lösung funktionieren die Marker für sich und die rot-grün-DIVs für sich, aber leider nicht die Kopplung zwischen beiden. Und die JS-Console gibt TypeError: document.getElementById(...) is null und ReferenceError: toggleBounce is not defined aus.

(die Events müssen jeweils zweimal auf berlin1, berlin2 und berlin3 laufen)

Gruß

Zerberus
 
Ja, das habe ich auch schon gemerkt. Lies mal mein Edit oben, wenn man die Funktion toggleBounce wieder außerhalb von initialize() definiert, müsste es funktionieren. Außerdem dürfen die Objekte der Marker nicht in Hochkommas gesetzt werden, so:
Code: 
  google.maps.event.addListener(markberlin1, 'mouseover', function () { toggleBounce("berlin1", markberlin1) });
  google.maps.event.addListener(markberlin2, 'mouseout', function () { toggleBounce("berlin2", markberlin2) });
  google.maps.event.addListener(markberlin3, 'mouseover', function () { toggleBounce("berlin3", markberlin3) });
Ebenso bei den Eventhandlern bei den divs. Bei mir funktioniert es dann.
Sehe ich das eigentlich richtig: Bei allen Mouseovers, Markers oder Boxes, soll das selbe passieren, Bouncing und Farbwechsel? Dann könnte man doch daran denken, für alle Mouseover nur eine Funktion zu verwenden, die beides tut, so wie jetzt schon toggleBounce(():
 
BTW: Wenn Du dich um eine Optimierung bemühst, könntest Du noch einen Schritt weiter gehen und die Positionen in einem Array ablegen. Dann kannst Du die Marker-Objekte automatisch erzeugen, indem Du das Array mit den Positionen durchläufst und jedes Mal das Marker-Objekt mit dem Eventhandler erzeugst und in einem weiteren Array ablegst. Das Hinzufügen eines neuen Markers ist dann ein Kinderspiel, weil man nur das Array mit den Positionen erweitern muss und der Rest geht automatisch. Nur eine neue Box muss man noch von Hand anlegen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück