[JS] Huidige nummer uit loop gebruiken ?

[Verwijderd]

Wellicht een vreemde titel maar ik wist het niet anders te omschrijven.

Ik ben bezig met een stukje Javascript en wil wat tekst laten zien in een aparte div.

JavaScript:

function setPreview()
{
 var li, anode, item;
 
 item=document.getElementsByTagName('div');
  for(a=0;a<item.length;a++) {
    if(/gallerylist/.test(item[a].className))
    {
     li=item[a].getElementsByTagName('li');
     for(i=0;i<li.length;i++)
     {
      anode=li[i].getElementsByTagName('a')[0];
      anode.onmouseover=function(){setText(this,a);};
      anode.onmouseout=function(){setNone(this,a);};
     }
   }
  }
}
function setText(i,a){
alert(i.firstChild.nodeValue + ': div ' +  a)
}

De regel

JavaScript:

anode.onmouseover=function(){setText(this,a);};

zou de huidige div (van de "a" loop) moeten aannemen bij de loop, maar hij neemt altijd 12 aan.(aantal divs is 12 en is dus de laatste).

Hoe kan ik het huidige nummer uit de loop verkrijgen om deze aan de functie door te geven ? Dit moet wel heel simpel zijn, maar ik zie het niet meer na meerdere uren staren naar code.

De page staat hier en zal dus een alert geven bij als je over een link gaat.

[ Voor 8% gewijzigd door Verwijderd op 12-12-2005 13:03 ]

[André]

Maak er eens new function van

[BasieP]

ik weet zeker dat dit met standaard debug werk wel op te lossen is.

doe eens dit:, en kijk wat ie zegt:

code:

function setPreview()
{
 var li, anode, item;
 
 item=document.getElementsByTagName('div');
  for(a=0;a<item.length;a++) {
   alert(/gallerylist/.test(item[a].className));  //true/false 12x
    if(/gallerylist/.test(item[a].className))
    {
     li=item[a].getElementsByTagName('li');
     alert(li.length);
     for(i=0;i<li.length;i++)
     {
       anode=li[i].getElementsByTagName('a')[0];
      anode.onmouseover=function(){setText(this,a);};
      anode.onmouseout=function(){setNone(this,a);};
     }
   }
  }
}
function setText(i,a){
alert(i.firstChild.nodeValue + ': div ' +  a)
}

[ Voor 5% gewijzigd door BasieP op 12-12-2005 13:13 ]

[Verwijderd]

Maak van a eens een local variable:

code:

for(var a=0;a<item.length;a++) {

[Verwijderd]

@Andre met een new function snapt ie niet meer waar de child vandaan moet komen

@Blues local var maakt geen verschil

BasieP schreef op maandag 12 december 2005 @ 13:12:
ik weet zeker dat dit met standaard debug werk wel op te lossen is.

doe eens dit:, en kijk wat ie zegt:

En precies zoals expected: 3x een true (de gezochte div komt 3x voor).

[ Voor 68% gewijzigd door Verwijderd op 12-12-2005 13:23 ]

[crisp]

JavaScript:

anode.onmouseover = new Function('setText('+a+')');

'this' doorgeven levert denk ik een verkeerde referentie op in setText aangezien 'this' in je setPreview functie verwijst naar het window object. Met bovenstaande zou setText er als volgt uitzien ('this' verwijst daar al naar je anchor):

JavaScript:

function setText(a)
{
  alert(this.firstChild.nodeValue + ': div ' +  a)
}

Blues: closures zijn references - logisch dat als je 'a' meegeeft als closure hij altijd '3' zal aangeven - het is immers maar 1 object waarnaar gerefereert wordt.

[Verwijderd]

crisp schreef op maandag 12 december 2005 @ 13:23:

JavaScript:

anode.onmouseover = new Function('setText('+a+')');

'this' doorgeven levert denk ik een verkeerde referentie op in setText aangezien 'this' in je setPreview functie verwijst naar het window object. Met bovenstaande zou setText er als volgt uitzien ('this' verwijst daar al naar je anchor):

JavaScript:

function setText(a)
{
  alert(this.firstChild.nodeValue + ': div ' +  a)
}

inderdaad die this lijkt de boosdoener:

dit werkt:

JavaScript:

function setPreview()
{
 var li, atxt, anode, item, a, i;
 
 item=document.getElementsByTagName('div');
  for(a=0;a<item.length;a++) {

    if(/gallerylist/.test(item[a].className))

    {
     li=item[a].getElementsByTagName('li');
     for(i=0;i<li.length;i++)
     {
        anode=li[i].getElementsByTagName('a')[0];
        anode.onmouseover=new function(){setText(anode, a);};
        anode.onmouseout=new function(){setNone(anode,a);};

     }
    }
  }
}
function setText(i,current){
alert(i.firstChild.nodeValue + ': div ' +  current)
}

Many thankx !

[ Voor 20% gewijzigd door Verwijderd op 12-12-2005 13:33 ]

[crisp]

Vergeet niet dat dergelijke closures een recept zijn voor memory-leaks in IE...
Daarbij is het ook niet nodig aangezien je gewoon 'this' kan gebruiken in setText...

Overigens kan je die 'a' eventueel ook nog als property in het object opslaan:

JavaScript:

anode.a = a;
anode.onmouseover = setText;
...
function setText()
{
  alert(this.a);
}

[ Voor 75% gewijzigd door crisp op 12-12-2005 13:42 ]

[Verwijderd]

crisp schreef op maandag 12 december 2005 @ 13:39:
Vergeet niet dat dergelijke closures een recept zijn voor memory-leaks in IE...
Daarbij is het ook niet nodig aangezien je gewoon 'this' kan gebruiken in setText...

Overigens kan je die 'a' eventueel ook nog als property in het object opslaan:

JavaScript:

anode.a = a;
anode.onmouseover = setText;
...
function setText()
{
  alert(this.a);
}

Dit werkt ook erg handig moet ik zeggen, thanks! (maakt meer sense in mijn hoofd)

[BasieP]

als ik even aan topic hijacking mag gaan doen:

ik heb een soortgelijk probleem (gebaseerd op zelfde structuur als TS)

code:

function init() {
    var item, anode;
    
    item = document.getElementsByTagName('img');
    for(a=0;a<item.length;a++) {
        anode = item[a];
        if(anode.className == "dragimg") {
            anode.a = a;
            anode.onmouseover = new function() { startdrag(); };
            anode.onmouseout = new function() { stopdrag(); };
        }
    }   
}

function startdrag() {
    alert(this.a);
}

het probleem is dat nu 'startdrag' altijd uitgevoerd word als ik de pagina laad, en niet als ik met me muis over zo'n image heen ga.

verder kan ik in de startdrag() functie niet dit doen:

code:

this.style.etc.

maar wel dit:

code:

item = document.getElementsByTagName('img');
item[this.a].style.etc.;

[ Voor 9% gewijzigd door BasieP op 12-12-2005 14:14 ]

[crisp]

doe dan gewoon dit:

JavaScript:

anode.onmouseover = startdrag;
anode.onmouseout = stopdrag;

[BasieP]

crisp schreef op maandag 12 december 2005 @ 14:13:
doe dan gewoon dit:

JavaScript:

anode.onmouseover = startdrag;
anode.onmouseout = stopdrag;

mm ik ziet dat het werkt.. alleen waarom met () niet, en zonder () wel
* BasieP snapt daar de logica niet van, het blijft toch gewoon functie aanroep?

[crisp]

JavaScript:

// anonymous function; wordt toegekent aan var foo:
var foo = function() { alert('foo'); }

// anonymous function, wordt uitgevoerd en de returnvalue wordt toegekent aan var foo:
var foo = new function() { alert('foo'); }

// function reference
var foo = someFunction;

// function constructor
var foo = new Function('alert(\'foo\');');

[BasieP]

crisp schreef op maandag 12 december 2005 @ 14:21:

en die is opgeslagen tnx
(geen javaboek oid hier )

[Verwijderd]

Hij werkt, maar ik loop weer tegen iets vaags aan

JavaScript:

currentitem = item[a].childNodes[0].getAttribute('id');

Dit werkt in IE6 maar niet in FF:

Fout: item[a].childNodes[0].getAttribute is not a function

Hij verwacht hem in een functie ?

De context:

JavaScript:

function setPreview()
{
 var li, atxt, anode, item, a, i, currentitem;
 preview = 0
 item=document.getElementsByTagName('div');
  for(a=0;a<item.length;a++) {
    if(/galleryitem/.test(item[a].className))
        {
        currentitem = item[a].childNodes[0].getAttribute('id');
        }
    if(/gallerylist/.test(item[a].className))
    {

     preview ++;
     
     li=item[a].getElementsByTagName('li');
     for(i=0;i<li.length;i++)
     {
        anode=li[i].getElementsByTagName('a')[0];
        anode.p = 'preview'+preview
        anode.img = 'image'+preview
        anode.dtext = anode.firstChild.nodeValue
        anode.mf = currentitem

        anode.onmouseover= setText;
        anode.onmouseout = setNone;
     }
    }
  }
}

De page staat hier.

[ Voor 8% gewijzigd door Verwijderd op 12-12-2005 16:19 ]

[crisp]

http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM

Je childNodes[0] is niet het element dat je verwacht, maar een textNode

[ Voor 40% gewijzigd door crisp op 12-12-2005 16:23 ]

[Verwijderd]

crisp schreef op maandag 12 december 2005 @ 16:20:
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM

whitespace issues, daar word je niet vrolijk van.

Je childNodes[0] is niet het element dat je verwacht, maar een textNode

er zit een attribute op de h4 die ik wil uitlezen, de h4 uitlezen heeft geen zin omdat sIFR er replacement meuk in gooit.

[crisp]

Verwijderd schreef op maandag 12 december 2005 @ 16:31:
[...]

whitespace issues, daar word je niet vrolijk van.

Er zijn goede redenen voor die daar uiteengezet worden, samen met sample code waarmee je crossbrowser wel het element kan aanspreken dat je wilt hebben.

[...]

er zit een attribute op de h4 die ik wil uitlezen, de h4 uitlezen heeft geen zin omdat sIFR er replacement meuk in gooit.

Dat snap ik; de h4 is in dit geval niet de 1e childNode maar de 2e in Firefox aangezien de 1e childNode een textNode is die enkel whitespace bevat (zie je broncode).

JavaScript:

currentitem = first_child(item[a]).getAttribute('id');

[Verwijderd]

crisp schreef op maandag 12 december 2005 @ 16:42:
Dat snap ik; de h4 is in dit geval niet de 1e childNode maar de 2e in Firefox aangezien de 1e childNode een textNode is die enkel whitespace bevat (zie je broncode).

JavaScript:

currentitem = first_child(item[a]).getAttribute('id');

Ik heb ondertussen dat whitespace script eringehangen en het werkt verder idd vlekkeloos.

bedankt nogmaals!