[JAVASCRIPT] innerhtml en this referentie

[DarkSilence]

Ik zit met een raar probleem. Ik gebruik JavaScript in mijn HTML webpagina om een menubalk bestaande uit een tabel mee te vullen.

Ik maak gebruik van JavaScript die de innerhtml van het bodyobject veranderd, om het menu door een nieuw menu te vervangen. In mijn menu die door JavaScript is gemaakt roep ik ook JavaScripts aan.

Ik geef aan een methode het argument this mee, dit is niet de this van dat object maar van het body object waar ik met innerhtml de boel in heb gezet. Waarom heb ik een foutieve referentie naar het this object?

Mijn code:

JavaScript:

function resetToolbar(obj) {
    obj.innerHTML = "";
}

function buildToolbar(obj) {
    resetToolbar(obj);

    var tbrArray = new Array(new Array('verwijderden', 'http://www.google.nl', 'icoVerwijderen.gif'),new Array('nieuw', 'http://www.ilse.nl', 'none'))

    obj.innerHTML = obj.innerHTML + "<table height=\"22\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> \n";
    obj.innerHTML = obj.innerHTML + "  <tr> \n";

    for (i = 0; i < tbrArray.length; i++) {
        if (tbrArray[i][2] == "none") {
            obj.innerHTML = obj.innerHTML +  "<td class=\"tblNavigation\"><a href=\"" + tbrArray[i][1] + "\" onmouseover=\"tbrOnMouseOver(this);\" onMouseOut=\"tbrOnMouseOut(this)\" class=\"lnkWerkbalk\">" + tbrArray[i][0] + " &nbsp; </a></td> ";
        } else {
            obj.innerHTML = obj.innerHTML +  "<td class=\"tblNavigation\"><a href=\"" + tbrArray[i][1] + "\" onmouseover=\"tbrOnMouseOver(this);\" onMouseOut=\"tbrOnMouseOut(this)\" class=\"lnkWerkbalk\">[img]\"images/"[/img]" + tbrArray[i][0] + " &nbsp; </a></td> ";
        }
    }

    obj.innerHTML = obj.innerHTML + "  </tr> \n";
    obj.innerHTML = obj.innerHTML + "</table> \n";
} 

Wie heeft een idee wat het probleem is of hoe ik het anders kan oplossen om het wel dynamisch te houden? Alvast bedankt

[Verwijderd]

this verwijst als het goed is naar de td, maar ik begrijp dus dat je dat niet wilt?

waar moet ie wel heen verwijzen? naar body?

[DarkSilence]

Verwijderd schreef op zondag 03 juli 2005 @ 19:35:
this verwijst als het goed is naar de td, maar ik begrijp dus dat je dat niet wilt?

waar moet ie wel heen verwijzen? naar body?

Ik wil dat hij naar de td of a verwijst, maar hij verwijst naar de body. Dit vind ik erg vreemd en verwacht ik niet als ik mijn code bekijk. Wie heeft een idee hoe dit komt?

[Verwijderd]

Kun je de aanroep van je methode is laten zien, ik vermoed dat je een scope bent vergeten.

Als je namelijk vanuit een element een methode wilt aanroepen op het object moet je wel het object scopen, anders verwijst this naar je element.


Dit gaat dus fout, de mijnmethode bestaat niet op het element

function mijnobject(){
this.element = document.createElement('div');
this.element.onclick = this.mijnmethode();
}
mijnobject.prototype.mijnmethode = function(){}

Dit zou dus de werking dan moeten zijn

function mijnobject(){
this.element = document.createElement('div');
// scope mijnobject
this.element.objectref = this;
this.element.onclick = this.objectref.mijnmethode();
}
mijnobject.prototype.mijnmethode = function(){}

[ Voor 79% gewijzigd door Verwijderd op 03-07-2005 20:51 ]

[crisp]

De innerHTML van je hele body op deze manier aanpassen zou ik zeker niet doen; dat kan nog wel eens problemen opleveren in verschillende browsers. Zorg liever dat je al een container-element in je source hebt staan waar je je menu dan aan toevoegd (hetzij met innerHTML, hetzij via DOM-methoden).
De 'this' referentie in het voorbeeld (de onmouseover en onmouseout) zou normaal naar het anchor waarin ze gedefinieerd staan moeten verwijzen.

Nog 2 opmerkingen:

1) maak slimmer gebruik van de verschillende quotes (double vs single quotes) - dat scheelt je een hoop escaping.
2) een unordered list verdient de voorkeur boven een tabel voor dit soort doeleinden

[DarkSilence]

crisp schreef op zondag 03 juli 2005 @ 21:16:
De innerHTML van je hele body op deze manier aanpassen zou ik zeker niet doen; dat kan nog wel eens problemen opleveren in verschillende browsers. Zorg liever dat je al een container-element in je source hebt staan waar je je menu dan aan toevoegd (hetzij met innerHTML, hetzij via DOM-methoden).
De 'this' referentie in het voorbeeld (de onmouseover en onmouseout) zou normaal naar het anchor waarin ze gedefinieerd staan moeten verwijzen.

Nog 2 opmerkingen:

1) maak slimmer gebruik van de verschillende quotes (double vs single quotes) - dat scheelt je een hoop escaping.
2) een unordered list verdient de voorkeur boven een tabel voor dit soort doeleinden

Ik ga nu uitzoeken of het met dom methoden wel goed gaat. Het is idd wel handig alsik slim gebruik ga maken van single en double quotes. Ik moet wel een table gebruiken want de bedoeling is dat ik een horizontale werkbalk creeer. Zoals in elke windows app met icoontjes opslaan, openen etc. De achterggrond van de tabel wil ik ook van kleur laten veranderen. Dit gaat allemaal wel goed als ik hem statish in html maak maar ik wil het juist dynamish houden.

Mijn functie gaat alle parents af om te kijken of dat toevallig de TD tag is. Dus of hij nou naar de anchore verwijst of naar de TD gaat allebij goed. Maar hij verwijst dus naar de body.

[crisp]

DarkSilence schreef op maandag 04 juli 2005 @ 12:40:
[...]


Ik ga nu uitzoeken of het met dom methoden wel goed gaat. Het is idd wel handig alsik slim gebruik ga maken van single en double quotes. Ik moet wel een table gebruiken want de bedoeling is dat ik een horizontale werkbalk creeer.

Dat kan ook met een list...

Mijn functie gaat alle parents af om te kijken of dat toevallig de TD tag is. Dus of hij nou naar de anchore verwijst of naar de TD gaat allebij goed. Maar hij verwijst dus naar de body.

Wellicht gaat er dan iets fout in die functie?

[DarkSilence]

crisp schreef op maandag 04 juli 2005 @ 12:55:
[...]

Dat kan ook met een list...

[...]

Wellicht gaat er dan iets fout in die functie?

Nou ja volgens mij is die functie die naar de juiste parent zoekt gewoon goed, ik gebruik hem ook bij andere methoden. Maar ik maak nu gebruik van dom methoden zoals jij zei en dit werkt primma !
Dus ik moet gewoon geen innerhtml van body willen wijzigen.

Heel erg bedankt voor je hulp!