[JS] event handlers op elementen via DOM

[Johnny]

Als ik via de DOM manier in JavaScript een element maak dan werken event handlers daarop niet in Mozilla en MSIE. Opera doet het wel.

Ik heb zoiets al eens eerder gehad, maar toen werkte het alleen niet in MSIE en kon ik het oplossen met innerHTML.

Nu wil ik echter voor iedere tag een andere plaatsen. In dit voorbeeld een afbeelding voor een titel waarbij het plaatje aanklikbaar zou moeten zijn met het onclick attribuut. Het plaatje wordt wel geplaatst, maar in Mozilla en MSIE gebeurt er niets als je er op klikt, Opera laat wel gewoon de alert zien.

code:

function test() {

    titles = document.getElementsByTagName('h1');

    for(var i=0; i < titles.length; i++) {

        var img = document.createElement('img');

        img.src = 'scroll.png';

        img.onclick = "alert('test')";

        titles[i].parentNode.insertBefore(img, titles[i]);
    }
}

window.onload = test;

Voorbeeld van de HTML pagina

Hoe los ik dat op?

[KillR-B]

img.onclick = "alert('test')";

veranderen in:

img.onclick = function() { alert('test'); };

[Amras]

Zo zou ie het moeten doen

JavaScript:

img.onclick = function() {
    alert("test");
}

edit:
Grrr... KillR-B

[ Voor 21% gewijzigd door Amras op 28-08-2004 13:39 ]

[Johnny]

Een simpele alert met een vaste string werkt nu.

Maar als ik in die alert bijvoorbeeld de ID van de titel wil laten zien dan gaat het niet

JavaScript:

function test() {

    titles = document.getElementsByTagName('h1');

    for(var i=0; i < titles.length; i++) {
        //werkt wel
        alert(titles[i].id);

        var img = document.createElement('img');

        img.src = 'scroll.png';
        //werkt niet
        img.onclick = function() { alert(titles[i].id); };

        titles[i].parentNode.insertBefore(img, titles[i]);
    }
}

Voorbeeld van de HTML pagina

[Clay]

moet met

code:

alert(this.id);

in de onclick wel werken. This verwijst dan daar naar de image, omdat je het met die onclick ref direct aan het image object hangt.

[crisp]

of

JavaScript:

img.onclick = new Function('alert(\''+titles[i].id+'\')');

of

JavaScript:

img.onclick = function() { alert(this.nextSibling.id); }