Dynamische Objektnamen ohne eval ?

[CaptainCarter]

Hallo,

ich generiere den Zugriff auf die CSS-Eigenschaften eines DIV-Containers über mehrere Arrays. Falls möglich würde ich das gerne ohne eval erreichen, aber selbst mit erhalte ich grundsätzlich die Fehlermeldung "missing ; before statement" unabhängig ich welchem Script-Kontext die Anweisung steht. Ein Beispiel für die Generierung:

info[0][0] = "nameDiv";
info[0][1] = "style.top";

var1 = "document.getElementById("" + info[0][0] + "")." + info[0][1] + " = 30px";
eval(var1);

Danke für alle Tips.

Captain C.

[Struppi]

Hallo,

ich generiere den Zugriff auf die CSS-Eigenschaften eines DIV-Containers über mehrere Arrays. Falls möglich würde ich das gerne ohne eval erreichen, aber selbst mit erhalte ich grundsätzlich die Fehlermeldung "missing ; before statement" unabhängig ich welchem Script-Kontext die Anweisung steht. Ein Beispiel für die Generierung:

info[0][0] = "nameDiv";
info[0][1] = "style.top";

var1 = "document.getElementById("" + info[0][0] + "")." + info[0][1] + " = 30px";
eval(var1);

eval ist evil.
Es gibt nur wenige sinnvolle Verwendungsmöglichkeiten für eval und deiner ist 100% keiner.

Außerdem solltest du bei Problemen das was du versuchst auch überprüfen  dann findest du vielleicht sogar selber den Fehler.

info[0][0] = "nameDiv";

var obj  = document.getElementById(info[0][0])
if(obj)
{
    obj.style.top = "30px";
}
else
{
    alert('Das Element mit dem Namen: ' + info[0][0] + ' existiert nicht.');
}

Struppi.

[CaptainCarter]

ich generiere den Zugriff auf die CSS-Eigenschaften eines DIV-Containers über mehrere Arrays. Falls möglich würde ich das gerne ohne eval erreichen, aber selbst mit erhalte ich grundsätzlich die Fehlermeldung "missing ; before statement" unabhängig ich welchem Script-Kontext die Anweisung steht. Ein Beispiel für die Generierung:

info[0][0] = "nameDiv";
info[0][1] = "style.top";

var1 = "document.getElementById("" + info[0][0] + "")." + info[0][1] + " = 30px";
eval(var1);

eval ist evil.
Es gibt nur wenige sinnvolle Verwendungsmöglichkeiten für eval und deiner ist 100% keiner.

Außerdem solltest du bei Problemen das was du versuchst auch überprüfen  dann findest du vielleicht sogar selber den Fehler.

info[0][0] = "nameDiv";

var obj  = document.getElementById(info[0][0])
if(obj)
{
    obj.style.top = "30px";
}
else
{
    alert('Das Element mit dem Namen: ' + info[0][0] + ' existiert nicht.');
}

Hallo,

danke, aber deine Vorgehensweise funktioniert leider nicht bei meinem Problem. Mit einer einzigen Variable, habe ich es auch ohne eval hinbekommen. Das Problem liegt ja darin, das "style.top" auch aus einer Variable kommen soll, damit so auch andere CSS-Eigenschaften angesprochen werden können. Und

info[0][0] = "nameDiv";
info[0][1] = "style.top";

var obj  = document.getElementById(info[0][0]).info[0][1];
obj = "30px";

funktioniert genausowenig wie

var obj  = document.getElementById(info[0][0]);
obj.info[0][1] = "30px";

Vielleicht mache ich ja bei der Notation etwas falsch.

Gruss
CC

[Struppi]

danke, aber deine Vorgehensweise funktioniert leider nicht bei meinem Problem. Mit einer einzigen Variable, habe ich es auch ohne eval hinbekommen. Das Problem liegt ja darin, das "style.top" auch aus einer Variable kommen soll, damit so auch andere CSS-Eigenschaften angesprochen werden können. Und

info[0][0] = "nameDiv";
info[0][1] = "style.top";

welchen Sinn macht es das ganze in Variabeln zu packen?

Sorry, aber das ist doch völiger blödsinn. wenn du verschiedene Eigenschaften setzten willst schreibe einfach verschiedenen Funktionen

function top(obj, value)
{
if (typeof value != 'undefined') obj.style.top = value
return obj.style.top;
}

Evtl. solltest du dein Konzept überdenken.

Struppi.

[CCarter]

danke, aber deine Vorgehensweise funktioniert leider nicht bei meinem Problem. Mit einer einzigen Variable, habe ich es auch ohne eval hinbekommen. Das Problem liegt ja darin, das "style.top" auch aus einer Variable kommen soll, damit so auch andere CSS-Eigenschaften angesprochen werden können. Und

info[0][0] = "nameDiv";
info[0][1] = "style.top";

welchen Sinn macht es das ganze in Variabeln zu packen?

Sorry, aber das ist doch völiger blödsinn. wenn du verschiedene Eigenschaften setzten willst schreibe einfach verschiedenen Funktionen

function top(obj, value)
{
if (typeof value != 'undefined') obj.style.top = value
return obj.style.top;
}

Evtl. solltest du dein Konzept überdenken.

Struppi.

Ich denke nicht, denn auf diese Weise läßt sich mit einer einzigen Funktion und entsprechenden Konfigurations-Dateien jede beliebige CSS-Eigenschaft manipulieren. Kein Rummanipulieren oder Cut&Paste mehr in Scriptdateien.

Gruss
CCarter

[Struppi]

function top(obj, value)
{
if (typeof value != 'undefined') obj.style.top = value
return obj.style.top;
}

Evtl. solltest du dein Konzept überdenken.

Struppi.

Ich denke nicht, denn auf diese Weise läßt sich mit einer einzigen Funktion und entsprechenden Konfigurations-Dateien jede beliebige CSS-Eigenschaft manipulieren. Kein Rummanipulieren oder Cut&Paste mehr in Scriptdateien.

wieso das denn?
Du schreibst eine Funktion für eine bestimmte Eigenschaft und kannst damit sogar verschiedene Versionen und Modelle bedienen, die Version, die du jetzt nimmst funktioniert nur in wenigen Browsern (die allerdigs von vielen benutzt werden, aber mit Sicherheit nicht von allen).

Dein Konzept ist sehr ungewöhnlich und nicht besonders pflegeleicht, darüber hinaus Fehleranfällig da du kaum noch verfolgen kannst woher evtl. Fehler kommen.

wenn du lediglich die Styles agfragen/verändern willst geht es so einfach und Browserkompatibel:

function Style(obj, attr, value)
{
     if(!obj) return;
     if(obj.style)
     {
         if(value) obj.style[attr] = value;
         return obj.style[attr];
     }
     else
     {
         if(value) obj[attr] = value;
         return obj[attr];

}
}

Struppi.

[CCarter]

Evtl. solltest du dein Konzept überdenken.

Struppi.

Ich denke nicht, denn auf diese Weise läßt sich mit einer einzigen Funktion und entsprechenden Konfigurations-Dateien jede beliebige CSS-Eigenschaft manipulieren. Kein Rummanipulieren oder Cut&Paste mehr in Scriptdateien.

wieso das denn?
Du schreibst eine Funktion für eine bestimmte Eigenschaft und kannst damit sogar verschiedene Versionen und Modelle bedienen, die Version, die du jetzt nimmst funktioniert nur in wenigen Browsern (die allerdigs von vielen benutzt werden, aber mit Sicherheit nicht von allen).

Dein Konzept ist sehr ungewöhnlich und nicht besonders pflegeleicht, darüber hinaus Fehleranfällig da du kaum noch verfolgen kannst woher evtl. Fehler kommen.

wenn du lediglich die Styles agfragen/verändern willst geht es so einfach und Browserkompatibel:

function Style(obj, attr, value)
{
     if(!obj) return;
     if(obj.style)
     {
         if(value) obj.style[attr] = value;
         return obj.style[attr];
     }
     else
     {
         if(value) obj[attr] = value;
         return obj[attr];

}
}

Ok, ich habe mich falsch ausgedrückt. Ich möchte nicht nur CSS-, sondern alle DOM-Eingriffe über ein Script regeln. Natürlich ist es wahrscheinlich effektiver, einfach eine Funktion für alle CSS, eine für alle href, eine für alle src, etc. zu schreiben. Aber mich interessiert, ob so eine universelle Änderungsfunktion, die ihre Konfiguration aus extra dafür geschriebenen Dateien zieht, effektiv möglich ist.

Gruss
CCarter

[Struppi]

Ok, ich habe mich falsch ausgedrückt. Ich möchte nicht nur CSS-, sondern alle DOM-Eingriffe über ein Script regeln. Natürlich ist es wahrscheinlich effektiver, einfach eine Funktion für alle CSS, eine für alle href, eine für alle src, etc. zu schreiben. Aber mich interessiert, ob so eine universelle Änderungsfunktion, die ihre Konfiguration aus extra dafür geschriebenen Dateien zieht, effektiv möglich ist.

Irgendwie versteh ich den Aufwand den du betreibst nach wie vor nicht. Wieso sollten den Unterschiedliche Funktionen für die style Eigenschaften nötig sein? Du brauchst eine Funktion, die dir die Referenz auf das Objekt aus dem Dokument holt und eine Funktion um die CSS zu holen/setzten. Fertig.

Welche ersparniss du aus einer Konfigurationsdatei ziehst will mir einfach nicht in den Sinn, da du im Prinzip versucht mit Hilfe einer, von dir so genannten Konfigurationsdatei, zu programmieren, also deine eigene Programmiersprache zu schreiben und dafür ist eine Konfigurationsdatei nicht gedacht.

Struppi.

[CCarter]

Ok, ich habe mich falsch ausgedrückt. Ich möchte nicht nur CSS-, sondern alle DOM-Eingriffe über ein Script regeln. Natürlich ist es wahrscheinlich effektiver, einfach eine Funktion für alle CSS, eine für alle href, eine für alle src, etc. zu schreiben. Aber mich interessiert, ob so eine universelle Änderungsfunktion, die ihre Konfiguration aus extra dafür geschriebenen Dateien zieht, effektiv möglich ist.

Irgendwie versteh ich den Aufwand den du betreibst nach wie vor nicht. Wieso sollten den Unterschiedliche Funktionen für die style Eigenschaften nötig sein? Du brauchst eine Funktion, die dir die Referenz auf das Objekt aus dem Dokument holt und eine Funktion um die CSS zu holen/setzten. Fertig.

Welche ersparniss du aus einer Konfigurationsdatei ziehst will mir einfach nicht in den Sinn, da du im Prinzip versucht mit Hilfe einer, von dir so genannten Konfigurationsdatei, zu programmieren, also deine eigene Programmiersprache zu schreiben und dafür ist eine Konfigurationsdatei nicht gedacht.

Ok, vielleicht denke ich auch zu kompliziert. Ein Beispiel: Ich will in diversen Seiten mit unterschiedlichen Layouts durch einen einzigen Mausklick CSS-Eigenschaften verändern. Und zwar mehrere Eigenschaften pro Klick. Natürlich will ich nicht mehrere Funktionen über den Event-Handler aufrufen und auch nicht für jede einzelne Aktion eine extra Funktion schreiben. Natürlich müßte man für letzteres nur jedesmal eine Standard-Funktion anpassen, aber am Ende ständen doch Dutzende oder Hunderte von seperaten Funktionen. Nicht gerade das was ich mir unter vernünftigem Code vorstelle. Also war meine Idee eine einzelne Funktion zu schreiben und für jede Seite die Anweisungen für den jeweiligen Klick in ein Array zu laden. Dessen Name wird durch den Event-Handler übermittelt und daraufhin die Aktionen im Array ausgeführt.

Hast du einen Vorschlag, wie das besser zu machen ist?

Gruss
CCarter

[Struppi]

Ok, vielleicht denke ich auch zu kompliziert. Ein Beispiel: Ich will in diversen Seiten mit unterschiedlichen Layouts durch einen einzigen Mausklick CSS-Eigenschaften verändern. Und zwar mehrere Eigenschaften pro Klick. Natürlich will ich nicht mehrere Funktionen über den Event-Handler aufrufen und auch nicht für jede einzelne Aktion eine extra Funktion schreiben. Natürlich müßte man für letzteres nur jedesmal eine Standard-Funktion anpassen, aber am Ende ständen doch Dutzende oder Hunderte von seperaten Funktionen. Nicht gerade das was ich mir unter vernünftigem Code vorstelle. Also war meine Idee eine einzelne Funktion zu schreiben und für jede Seite die Anweisungen für den jeweiligen Klick in ein Array zu laden. Dessen Name wird durch den Event-Handler übermittelt und daraufhin die Aktionen im Array ausgeführt.

Hast du einen Vorschlag, wie das besser zu machen ist?

keine Ahnung, aber willst du wirklich hunderte von CSS Eigenschaften ändern (gibt's überhaupt soviele)
Vor allem sind ja in deinem Beispiel auch keine Werte vorhanden.

Ich weiss ja nicht an welche CSS Eigenschaften du so denkst, aber evtl. kann man eine Universal Funktion schreiben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

// styles der Buttons und des Div

<style>
</style>

// JS funktionen

<script type="text/javascript">

function set()
{
    var l = set.arguments.length;
    var obj = set.arguments[0];

if(obj.style)
    {
        for(var i = 1; i < l;)
        {
            var t = set.arguments[i++];
            var v = set.arguments[i++];
            obj.style[t] = v;
        }
    }

}
</script>
</head>

<body>
<div id="test" style="position:absolute" onclick="set(this, 'top', '300px', 'left', '250px', 'color', 'red');">T E S T</DIV>

</body>
</html>

Funktioniert mit MZ und IE 6.

Struppi.

[peterS.]

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

<head>
    <title>accumulateNodeProperties()</title>
    <script type="text/javascript">
    <!--

function accumulateNodeProperties(nodeObject,arrayObject) {
        //  alert(arrayObject)
        //  alert(typeof(nodeObject));
            var stringValue = "";
            if (nodeObject && (typeof(nodeObject) == "object")) {
                if (arrayObject.constructor == Array) {
                    for (var i=0;i<arrayObject.length;i++) {
                        stringValue = arrayObject[i].toString();
                        if ((nodeObject[stringValue] !== null) && (nodeObject[stringValue] != undefined)) {
                        //  alert("nodeObject = nodeObject[" + arrayObject[i].toString() + "]");
                            nodeObject = nodeObject[arrayObject[i].toString()];
                        } else {
                        //  alert("break");
                            break;
                        }
                    }
                }
                return nodeObject;
            } else {
            //  return undefined;
                return null;
            }
        }

var info = [];
        info[0] = [];
        info[0][0] = "excerpt";
        info[0][1] = "style.color";
    //  info[0][1] = "style.top";

function runTestCase() {
        //  var propertyValue = accumulateNodeProperties(document.getElementById(info[0][0]),info[0][1].split("."));
            alert("accumulateNodeProperties(document.getElementById("" + info[0][0] + "","" + info[0][1] + "") = " + accumulateNodeProperties(document.getElementById(info[0][0]),info[0][1].split(".")));
            alert(document.getElementById(info[0][0]).style.color);
        //  alert(document.getElementById(info[0][0]).style.top);
        }

//  getestet unter windows mozilla 1.0, msie 5.0;
    //  nn4.x ist mit diesem beispiel nicht zu testen;
    //
    //  viel spass und by(t)e by(t)e - peterS. - [e-mail]
    //
    //-->
    </script>
</head>

<body onload="runTestCase()">
    <div>
        <br /><br />
        Testcase
        <br /><br />
    </div>
    <div id="excerpt" name="excerpt" style="color:#000000;">
        » Hallo,<br />
        » <br />
        » danke, aber deine Vorgehensweise funktioniert leider nicht bei meinem Problem.<br />
        » Mit einer einzigen Variable, habe ich es auch ohne eval hinbekommen. Das Problem<br />
        » liegt ja darin, das "style.top" auch aus einer Variable kommen soll, damit so auch<br />
        » andere CSS-Eigenschaften angesprochen werden können.<br />
        » <br />
        » Und<br />
        » <br />
        » info[0][0] = "nameDiv";<br />
        » info[0][1] = "style.top";<br />
        » <br />
        » var obj  = document.getElementById(info[0][0]).info[0][1];<br />
        » obj = "30px";<br />
        » <br />
        » funktioniert genausowenig wie<br />
        » <br />
        » var obj  = document.getElementById(info[0][0]);<br />
        » obj.info[0][1] = "30px";<br />
        » <br />
        » Vielleicht mache ich ja bei der Notation etwas falsch.<br />
        » <br />
        » Gruss<br />
        » CC<br />
    </div>
</body>

</html>

--
sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:)

[CCarter]

//  viel spass und by(t)e by(t)e - peterS. - [e-mail]

Genau das habe ich gesucht. Vielen Dank! Da ich das Prinzip jetzt verstanden habe, kann ich das Ganze ideal bei mir einbauen.

Viele Grüsse
CCarter

P.S.: Klasse Stil.