[js ]runtime layers maken vanuit een array

[killercow]

Ik ben bezig met een klein dhtml spelletje en ik wil daarvoor onclick een x aantal layers maken, hoe kan ik dit het beste oplossen, ik zou graag alle data van alle layers in een array zetten welke dan runtime (direct en constant) uitgelezen wordt en waarvan dan de layers gemaakt worden.

Ik heb het al eens eerder opgelost met IE door gewoon innerHTML te gebruiken en de layer html aan de html van de pagina toe te voegen maar dat vind ik persoonlijk toch minder geslaagd zeker aangezien het ook onder Mozilla MOET draaien (ie boeit me eigenlijk geen ruk)

Zijn er mogenlijkheden om runtime een array uit te lezen en en layers te generaten zonder dat ik een functie moet aanroepen die de gehele array nogmaals doorleest en alle layers opnieuw rendert?

in c++ is dit geen enkele probleem alleen bij javascript is het toch een stukje moeilijker.

alvast bedankt voor de moeite.

[crisp]

JavaScript:

var layers = new Array();
layer[0] = 'een tekstje';
layer[1] = '<strong>ook met html</strong>';

for (var i = 0; i < layers.length; i++) {
  var newlayer = document.createElement('div');
  newlayer.innerHTML  = layer[i];
  document.body.appendChild(newlayer);
}

zoiets?

[killercow]

hmm, werkt niet helemaal hier onder mozilla

maar oke, kan ik hier nu ook runtime nieuew layers aan toevoegen of moet ik dan een functie add layer maken die de nieuwe layer op het scherm gooit zodra er de array length anders wordt?

alvast bedankt voor voorgaande code crisp.

[André]

Dan doe je het volgende:

JavaScript:

var layers = new Array();

function AddLayer(tekst)
{
  layers[layers.length] = tekst;
  
  for (var i = 0; i < layers.length; i++)
  {
    var newlayer = document.createElement('div');
    newlayer.innerHTML  = layer[i];
    document.body.appendChild(newlayer);
  }
}

AddLayer('een tekstje');
AddLayer('<strong>ook met html</strong>');

En dit zou ook prima moeten werken in Mozilla.

[crisp]

Ik zou de verwijzing naar de layer dan ook in een global array zetten. Het leuke van het opslaan in een global array is dat je ook makkelijk naar een layer kunt verwijzen zonder een lookup te doen met document.getElementById (waar je ook nog eens elke layer een unieke id moet gaan geven).
Ook kan je ze dan makkelijk weer verwijderen:

JavaScript:

var layers = new Array();

function addLayer(text) {

  var i = layers.length;

  layers[i] = document.createElement('div');
  layers[i].innerHTML = text;
  document.body.appendChild(layers[i]);

}

function removeLayer(i) {

  document.body.removeChild(layers[i]);
  layers[i] = null;

}

addLayer('divje1');  // maakt een layer en zet het in layers[0]
addLayer('divje2');  // maakt een layer en zet het in layers[1]
removeLayer(0);  // verwijderd layers[0] weer

[André]

En nog een toevoeging op de removeLayer functie:

JavaScript:

function removeLayer(i)
{
  document.body.removeChild(layers[i]);
  layers.splice(i, 1);
}

Dan haal je echt de waarde uit de array.

[Verwijderd]

André schreef op 17 August 2003 @ 16:07:

Je moet alleen uitkijken met gebruik van bijv. array.push() die is nl. niet crossbrowser toepasbaar.

[crisp]

Verwijderd schreef op 17 August 2003 @ 16:19:
[...]


Je moet alleen uitkijken met gebruik van bijv. array.push() die is nl. niet crossbrowser toepasbaar.

daar is wel een mouw aan te passen door daar gewoon je eigen method voor te schrijven en als prototype toe te voegen aan het Array object.
Het is inderdaad IE5.0 die nog niet alle Array methods van JS1.3 kent (slechte zaak)

[killercow]

hmm ik heb bovenstaande code geprobeerd,
ik heb onload eerst een layer laten aanmaken door een array met code uit te lezen en deze in een new div element te dumpen, dit gaat goed. ik hier een 2e knop bij geplaatst die nog een string toevoegt aan de array met "to be layers" maar deze wordt niet gegenereerd, ookal herhaal ik de functie die alle layers onload wel laat zien.

ik gebruik nu mozilla 1.3 en ie 5.0 maar beiden vinden het niet helemaal netjes blijbaar.
mozilla zeurt ook af en toe over een fout document.body has no properties, maar dat schijnt een foutje te zijn dat hij het document.body element nog niet kent totdat de pagina volledig geladen is.

[crisp]

tuurlijk moet je wachten totdat de pagina volledig geladen is, anders moet je met document.write aan de gang...

en IE5.0 is al bejaard hoor

[ Voor 14% gewijzigd door crisp op 18-08-2003 09:46 ]