Groups | Search | Server Info | Keyboard shortcuts | Login | Register

Groups > de.comp.lang.javascript > #4693

Re: Schleife für document.getElementBy ... innerHTML?

Show all headers | View raw

Sascha Hüdepohl wrote:

> Maik Koenig <usenetspam@maikkoenig.de> schrieb:
>> Ich habe ein JavaScript in dem u.A. reichlich Variablen a la
>> "FooBar1", "FooBar2" etc mit Inhalten befüllt werden. Die sollen
>> jetzt ins Dokument geschrieben werden und zwar dort wo die
>> entsprechende ID innerhalb des Dokuments auftaucht:
> 
> Das Problem dabei ist an die Namen der Variablen zu kommen.
> 
> Wenn Du die Variablen alle nach dem gleichen Schema benannt hast und
> sie global sind, dann könnte folgendes funtionieren:
> 
> var target, i;
> for (i = 0; i < 10; i += 1) {
>   if (window['FooBar' + i]) {
>     target = document.getElementById('FooBar' + i);
>     if (target) {
>       target.textContent = window['FooBar' + i];
> […]

Nein, sondern

  target.textContent = this['FooBar' + i];

bzw. im lokalen Kontext oder Node.js

  target.textContent = global['FooBar' + i];

wobei man sich ohne Node.js das “global” mit

  var global = this;

im globalen Kontext selbst bauen muss.

<Gebetsmühle>

window != global.  Das mit “window” referenzierte Host-Objekt hat spezielle 
Eigenschaften, die das in ECMAScript spezifizierte globale Objekt nicht hat.  
Wer diese beiden Objekte verwechselt, muss sich nicht wundern, wenn Dinge 
passieren, die er nicht möchte.  Zum Beispiel wäre es bei diesem Ansatz 
fatal, wenn eine der globalen Variablen “location” hiesse: eine Zuweisung an 
die gleichnamige Eigenschaft von “window” löst eine Navigation aus.

</Gebetsmühle>

> Schöner fände ich es wenn die Variablen in einem Container
> zusammengefasst sind:

Das ist nicht nur eleganter, sondern auch weniger fehlerträchtig.

> var
>   i, target,
>   vars = {
>     fooBar1: 'wert 1',
>     fooBar2: 'wert 2',
>     andererName: 'wert 3'
>   };
> 
> for (i in vars) {
>   if (vars.hasOwnProperty(i)) {
>     target = document.getElementById(i);
>     if (target) {
>      target.textContent = = vars[i];
                            ^
| Uncaught SyntaxError: Unexpected token =

>     }
>   }
> }

Vermutlich effizienter:

  Object.keys(vars).forEach(function (key) {
    var target = document.getElementById(i);
    if (target) target.textContent = this[key];
  }, vars);

Oder

  vars = Object.create(null, {
    fooBar1: {value: 'wert 1', enumerable: true},
    fooBar2: {value: 'wert 2', enumerable: true},
    andererName: {value: 'wert 3', enumerable: true}
  });

dann kann man sich das vars.hasOwnProperty(…) sparen, weil das referenzierte 
Objekt keine Eigenschaften erbt.

Erfordert aber jeweils eine Implementierung/Emulation von ES 5+.  Siehe auch 
jsx.object.createDataObject() (zukünftig deprecated zugunsten von 
jsx.object.createDataObject()) usw. 
<http://PointedEars.de/wsvn/JSX/trunk/object.js>

Übrigens gibt es schon JS/ES-basierte Template-Engines.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to de.comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

Schleife für document.getElementBy ... innerHTML? Maik Koenig <usenetspam@maikkoenig.de> - 2015-08-12 01:02 +0200
  Re: Schleife für document.getElementBy ... innerHTML? Maik Koenig <usenetspam@maikkoenig.de> - 2015-08-12 01:07 +0200
  Re: Schleife für document.getElementBy ... innerHTML? "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-08-12 01:34 +0200
    Re: Schleife für document.getElementBy ... innerHTML? Maik Koenig <usenetspam@maikkoenig.de> - 2015-08-12 22:29 +0200
  Re: Schleife für document.getElementBy ... innerHTML? Sascha Hüdepohl <sascha@ravenworks.de> - 2015-08-12 09:33 +0200
    Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-12 15:44 +0200
      Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-12 15:47 +0200
      Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-12 16:18 +0200
      Re: Schleife für document.getElementBy ... innerHTML? Stefan Reuther <stefan.news@arcor.de> - 2015-08-12 19:18 +0200
        Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-12 20:54 +0200
          Re: Schleife für document.getElementBy ... innerHTML? Stefan Reuther <stefan.news@arcor.de> - 2015-08-13 20:09 +0200
    Re: Schleife für document.getElementBy ... innerHTML? Maik Koenig <usenetspam@maikkoenig.de> - 2015-08-12 22:42 +0200
      Re: Schleife für document.getElementBy ... innerHTML? Sascha Hüdepohl <sascha@ravenworks.de> - 2015-08-13 08:54 +0200
        Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-13 12:35 +0200
      Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-13 12:32 +0200
        Re: Schleife für document.getElementBy ... innerHTML? Maik Koenig <usenetspam@maikkoenig.de> - 2015-08-13 22:50 +0200
          Re: Schleife für document.getElementBy ... innerHTML? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-08-14 08:35 +0200

csiph-web