[DHTML+JS] klikken op <A> voert JS-functie uit

[AxiMaxi]

Ik heb een probleem met een skrippie:

JavaScript:

  function tableAdd() {

    for (var x=0; x < foundHits; x++) {

     var a=foundItems[x]

      // Voeg een regel toe aan de tabel.
      dataRow=dataBody.insertRow()

       // Voeg cel toe met item-nummer en daarnaast een cel met titel.
       itemCell = dataRow.insertCell(0)
       itemCell.innerText=dbItem[a]

       // Voeg cel toe met titel en maak 'm aanklikbaar
       clickCell=dataRow.insertCell(1)
       clickCell.id="cell"+x
       clickCell.innerText = ""

       // Maak de link aan
       var oAnchor = document.createElement("A")
       clickCell.appendChild(oAnchor)

       // Bepaal wat er gebeurt als je klikt op de titel         
       oAnchor.innerText=dbTitel[a]
       oAnchor.onclick="displayItem()"
       oAnchor.href="//"
    }
  }

De dbItem en dbTitel die aan de hand van de array worden weergegeven, voldoen aan een bepaalde zoek-voorwaarde.
De weergave vindt plaats in een <TBODY> waarin nieuwe Rows (dataRow) en Cells (itemCell en clickCell) worden aangemaakt.

Ter info :
foundHits = omvang van de foundItems array
foundItems[x] = array met record-nrs.
dbItem[a], dbTitel[a] = database-records

Ik wil nu dat de gebruiker op de titel kan klikken, waarna met de function displayItem() er meer informatie weergegeven gaat worden.

Nu is mijn probleem, dat er in oAnchor.href altijd een URL moet zitten. Ik kan er geen JavaScript function in kwijt, dat moet anders opgelost worden.
Maar hoe dan?

Als ik oAnchor.onclick gebruik en .href weglaat, werkt het niet.
Ik heb het ook al met .click geprobeerd, maar dat maakte niet uit.
Er gebeurt gewoon niets (ook geen error).

Misschien dat ik de syntax fout heb? Als ik de "-tekens weglaat in regel 25, dan krijg ik de foutmelding "Niet geïmplementeerd".

Kortom, hoe krijg ik in de clickCell de titel, waarbij het aanklikken van de titel de functie displayItem() wordt geactiveerd?

[Verwijderd]

Volgens mij ben je een beetje de weg kwijt, en heb je niet in de gaten hoe dat document object model precies werkt.

Waarom zet je in die href twee slashes neer? Dat is geen geldige waarde als je het in HTML zou zetten. Moet daar niet javascript:// staan, of dus javascript: functie(); ?

In die onclick in de HTML komt ook te staan wat er precies moet gebeuren, maar dat wordt in het object model omgezet, waarschijnlijk kun je dat het best voorstellen met Element.onclick = new Function("string uit HTML"); of iets soortgelijks.

Als je er zelf iets mee wilt doen, dan moet je in Element.onclick een function reference zetten, in jouw gevan dus die referentie naar de displayItem functie.

JavaScript:

oAnchor.onclick = displayItem;

[ Voor 0% gewijzigd door Verwijderd op 30-08-2002 12:13 . Reden: typo ]

[AxiMaxi]

Verwijderd schreef op 30 augustus 2002 @ 12:12:
Volgens mij ben je een beetje de weg kwijt, en heb je niet in de gaten hoe dat document object model precies werkt.

Kan kloppen, maar verduidelijk dat 's met een voorbeeld?
Wat doe ik structureel fout dan?

Verwijderd schreef op 30 augustus 2002 @ 12:12:
Waarom zet je in die href twee slashes neer? Dat is geen geldige waarde als je het in HTML zou zetten. Moet daar niet javascript:// staan, of dus javascript: functie(); ?

Klopt, is test-garbage. Had weggemoeten...
Maar dan nog, als ik er javascript: functie() inzet, gaat hij op zoek naar file://javascript: functie() (als URL dus)

Verwijderd schreef op 30 augustus 2002 @ 12:12:
Als je er zelf iets mee wilt doen, dan moet je in Element.onclick een function reference zetten, in jouw gevan dus die referentie naar de displayItem functie.

JavaScript:

oAnchor.onclick = displayItem;

Dat was 't, ik zette () achter de functie, maar die moeten weg.
Thanks.

[crisp]

Ik zit me de laatste tijd steeds meer af te vragen waarom we eigenlijk die <a> tag zo misbruiken om functies uit te voeren in plaats van te navigeren?
Waarom niet gewoon:

HTML:

<span class="underlined" onClick="functie()">Klik me maar</span>

omdat hovertjes dan niet werken in oudere browsers:

Cascading Stylesheet:

span.underlined {
  text-decoration: none;
  cursor: pointer:
  cursor: hand;
}
span.underlined:hover {
  text-decoration: underline;
}

[AxiMaxi]

Om je vraag te beantwoorden waarom ik <A> gebruik: oude gewoonte.
Ik zal 't in <SPAN> veranderen.

Bedankt voor de tip, ook over de hovertjes.

edit:

Zometeen zal je zien dat Woudloper het met Crisp eens is.
Ik was het al eens, dus ik heb het ook al in <SPAN> veranderd

[Verwijderd]

innerText? moet dat niet zijn :

HTML:

textVal = dbItem[a]
textNode = document.createTextNode(textVal)

innerText is toch geen DOM?

[AxiMaxi]

... al werk het niet, met die hovertjes.

Ik heb in de CSS-file een .klik en .klik:hover gemaakt, maar hij pakt alleen de .klik. Als ik over de titel hover, komt er geen underline

[Woudloper]

crisp heeft helemaal gelijk! Gebruik nooit javascript:, zie ook:

http://www.scottandrew.com/weblog/000284

[AxiMaxi]

Verwijderd schreef op 30 augustus 2002 @ 13:04:
innerText? moet dat niet zijn :

HTML:

textVal = dbItem[a]
textNode = document.createTextNode(textVal)

innerText is toch geen DOM?

MSDN zegt:
Performance Tip 3 - innerText vs. createTextNode
It is faster to update the content of an element directly through the DHTML innerText property than to call the DOM createTextNode method.

[edie]

crisp schreef op 30 augustus 2002 @ 12:42:

omdat hovertjes dan niet werken in oudere browsers:

Cascading Stylesheet:

span.underlined {
  text-decoration: none;
  cursor: pointer:
  cursor: hand;
}
span.underlined:hover {
  text-decoration: underline;
}

Dit lijkt me niet werken. Volgens mij hebben alle elementen (behalve de a) geen hover-effect.

onmouseover="this.style.textDecoration=underline" zou (dan) een beter alternatief zijn (maarja... zit je weer met extra code...)

[Verwijderd]

onzin, dat IE het niet kan is weer een ander verhaal, probeer maar eens in Mozilla (vanaf 1.0) of Konqueror

Cascading Stylesheet:

td:hover {
   background-color: ff0000;
}

Werkt gewoon.

Betreffende AxiMaxi

It is faster to update the content of an element directly through the DHTML innerText property than to call the DOM createTextNode method.

Het is dan wel meteen alleen toegankelijk voor IE gebruikers, maar dat maakt in jou geval zeker niks uit? (intern netwerk of zo met alleen IE gebruikers?)

[crisp]

AxiMaxi schreef op 30 augustus 2002 @ 13:07:
... al werk het niet, met die hovertjes.

Ik heb in de CSS-file een .klik en .klik:hover gemaakt, maar hij pakt alleen de .klik. Als ik over de titel hover, komt er geen underline

Dat werkt prima hoor in een browser die de recommendations een beetje volgt zoals Mozilla
Ik weet niet of het al in IE6 geimplementeerd is, maar IE5.5 en lager doen het inderdaad niet. Dan maar geen hovertjes zou ik zeggen; het handje zou dan al genoeg moeten zeggen, of je plakt er een onMouseOver / onMouseOut scriptje aan vast.

Ik moet zeggen dat ik tot nu toe ook altijd de <a> tag hebt gebruikt voor het uitvoeren van javascripts, maar dan meestal zo:

HTML:

<a href="javascript://" onClick="eenfunctie();return false">klikkerdeklik</a>

maar toch vind ik het niet mooi; de <a> tag is hier nooit voor bedoeld; mensen die shift-clicken komen in de problemen, je gaat een verplicht attribuut vullen met een loze waarde, en je moet in sommige gevallen zelfs de uitvoering van de href gaan cancellen om te voorkomen dat bijvoorbeeld animaties stoppen, of de pagina omhoog springt (bij gebruik van href="#"). En eigenlijk alleen maar om makkelijk een hover-effectje te kunnen maken...

[AxiMaxi]

Verwijderd schreef op 30 augustus 2002 @ 13:48:
Het is dan wel meteen alleen toegankelijk voor IE gebruikers, maar dat maakt in jou geval zeker niks uit? (intern netwerk of zo met alleen IE gebruikers?)

Stimmt genau
Maar ik ga ook nog wat bouwen dat wel openbaar wordt en dan zal ik er rekening mee houden.

En wat betreft die hovers, die doen het in MSIE 6 dus niet.
Jammer dan.