Tunnus:

Salasana:

Uusi käyttäjä

Haku

Pikalinkit

Kesähaaste 2010

Paranna Morpion-pelin kansainvälisiä ennätyksiä!

Ohjeet | Nettipeli | Tuloslista

Putkaposti

Suunnittele tiedosto, josta tulee suuri ZIP-paketti!

Vastauksia: 32
Paras: 1158

Tehtävään...

Keskustelu

Millä tavalla aiemmissa keskusteluissa esitetyn formin sijoittaminen tuohon linkin paikalle tuottaa ongelmia? (Nettisivut ja -ohjelmointi) lisää...


Keskustelu: Nettisivut ja -ohjelmointi: IE ja event handlerit

Dramo [08.02.2010 21:55:15] LainaaMuokkaa
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?)

Metabolix [08.02.2010 22:14:50] LainaaMuokkaa
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);
  }
}



Dramo [09.02.2010 01:59:18] LainaaMuokkaa
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.

Merri [09.02.2010 07:57:52] LainaaMuokkaa
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.

Metabolix [09.02.2010 11:32:23] LainaaMuokkaa
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.

Tämä aihe on yli kuukauden vanha, eikä siihen voi enää lähettää uusia viestejä.

ylläpito Antti Laaksonen, ulkoasu Otto Seiskari