Keskustelu: Nettisivujen teko: IE ja event handlerit

Olettaisin että "ongelma" on tässä: http://support.microsoft.com/kb/887741/

Eli siis jos jossakin elementissä on even handler (onclick, onmouseover jne..) joka kutsuu suoraan funktiota, ei sitä suoriteta vaan aletaan herjaamaan. ("Arvoksi on annettava objekti")

Minulla on siis seuraavanlaiset funktionkikkareet, jotka hyödyntävät Prototypeä ja Scriptaculousta.

function hideall() {
	['realcontent', 'ahbcontent', 'kuracontent', 'mapacontent'].each(Element.hide);
}

function show(itemID) {
	hideall();
	Effect.Appear(itemID);
}

Eli siis parilla elementillä on onmouseover="show('jokudiv')", jolloin hiiren mennessä sen päälle sen pitäisi piilottaa nuo tietyt divit ja näyttää jokudiv. Tämä toimii mainosti Firefoxilla ja Operalla, mutta ei IE:llä. Olen niin aloittelija etten ihan tajua artikkelissa esitettyä workaroundia, eli voisiko joku neuvoa vähän tarkemmin kuinka saan kutsutuksi nuo funktiot. (Vaiko mitenkään?)

Teet jo nykyään tuon aivan oikein (kuten artikkelikin neuvoo). Vika on luultavasti jossain muualla. Tutki asiaa ensiksi laittamalla show-funktioon vain alert, jolloin näet, kutsutaanko funktiota:

function show(itemID) {
  return alert("show(" + itemID + ")");
}

Jos funktiota kutsutaan oikein, virhe on muualla koodissasi. Voit vaikka laittaa show-funktioon try-catch-rakenteen ja etsiä virhettä heittämällä poikkeuksia:

function show(itemID) {
  var e;
  try {
    hideall();
    throw "hideall() tehty!";
    Effect.Appear(itemID);
  } catch (e) {
    alert(e);
  }
}

Kiitos, kokeilin noita mutta toimivat ihan odotetusti. (Paitsi IE:llä.)

Pienen hiekkalaatikkoilun jälkeen:

Opera ja Firefox suorittavat koodin oikein, ilman mitään mukinoita. IE herjaa riveille 35,36, ja 37 seuraavaa: Arvoksi on annettava objekti. Nämä rivit ovat

<button onclick="fshow('one')">One</button>
<button onclick="fshow('two')">Two</button>
<button onclick="fshow('three')">Three</button>

(Vaihdoin funktion fshowksi koska show meni ilmeisesti Prototypen kanssa sekaisin, mutta tämä ei silti korjannut ongelmaa.)

Sain koodin toimimaan näin:

<button onclick="['one', 'two', 'three'].each(Element.hide); Effect.Appear('one')">One</button> ... jne

Rumaa ja epäkätevää mutta toimii myös IE:llä. Parempia ehdotuksia otetaan vastaan.

Suosittelisin välttämään JavaScriptin sotkemista HTML:n sekaan. Tee sen sijaan nappulat viitteellisiksi ja lisää event muilla keinoin. Alla vähän esimerkkiä, joka ei välttämättä toimi (en ole testannut):

<p id="buttons">
    <button class="one">One</button>
    <button class="two">Two</button>
    <button class="three">Three</button>
</p>

<!-- head-elementissä -->
<script type="text/javascript">
window.onload = function() {
    $('buttons').descendants().each().onclick = function() {
        if( (typeof(this.className) == 'string') && this.className.length > 0 ) {
            fshow(this.className);
        }
    }
}
</script>

Ei välttämättä elegantein ratkaisu, minkä Prototypellä saa aikaiseksi, mutta idean pitäisi tulla selväksi. En tiedä korjaako tämä IE:n ongelmia, mutta ainakin funktioiden pitäisi vähintäänkin päätyä samaan nimiavaruuteen.

Merrin ehdotuksesta toimivaksi ja elegantiksi muokattu versio:

<button class="js_show" name="one">One</button>
<button class="js_show" name="two">Two</button>
<button class="js_show" name="three">Three</button>

function button_click() {
    show(this.name);
}
Event.observe(window, "load", function() {
    $$('.js_show').each(function(button) {
        button.observe("click", button_click);
    });
});

Voit myös testata vastaavaa koodia.