Pikku tulostuspulma. Jostakin syystä tämä ei tee mitään. Eikä ilmoita mitään virhettä.
function chgDelrow(idname,row){
document.getElementById(idname).innerHTML = row;
}Nuo molemmat muuttujat löytyvät kun niitä kokeilee tulostaa. Funktiota kutsutaan tästä linkistä, joka tulostuu tuohon samaan id:n ("rivi"+row).
<em onClick="chgDelrow(\'rivi'+row+'\',\''+row+'\')"> Del </em>
Kyseessä on ekana merkintä taulukon rivin poistosta ja tämä toimimaton on poiston peruutus.
Ps. Tässä vielä lähdekoodista lainaus, että kyseinen id löytyy
<td id="rivi15">
Mitenköhän musta tuntuu, että ne löytyvät kyllä silloin kun "kokeilet tulostaa", muttei tuossa haluamassasi kohdassa.
Eli heitäppäs vaikka alerttia (tulostat siellä idname:n ja row:n arvot) tuonne chgDelrow -funktion sisään ja katso mitä sinne asti tulee.
Testi tehty:
function chgDelrow(idname,row){
alert("Id-numero: "+idname+" Rivi: "+row);
// document.getElementById(idname).innerHTML = row;
}Tulostaa alert-ikkunaan:
Id-numero: rivi12 Rivi: 12
Ps. Alert ikkunassa tulostuu myös samanlainen kolmio, joka ilmoittaa virheestä virhekonsolissa. Kuuluuko sen näkyä?
Nuo \-merkit näyttävät aika kummallisilta, mutta jos funktiokutsu kerran toimii niin vika ei ole siinä.
Hassua laittaa muutaman rivin koodipätkä ja sanoa että "tämä kohta varmasti toimii". Linkki kokonaiseen testattavaan sivuun, plz.
jlaire kirjoitti:
Nuo
\-merkit näyttävät aika kummallisilta, mutta jos funktiokutsu kerran toimii niin vika ei ole siinä.Hassua laittaa muutaman rivin koodipätkä ja sanoa että "tämä kohta varmasti toimii". Linkki kokonaiseen testattavaan sivuun, plz.
En valitettavasti voi laittaa linkkiä sivuun. Ja mihin sitä koko sivun koodia tässä tarvitaan?
Katson mitä voin laittaa...
1. Alku
<td id="rivi2" onClick="delRow('2','rivi2')">2</td>Tämä toimii, tulostaa tuohon soluun tekstin "Del" ja lomakkeen hidden-kentän poistettavasta rivistä.
2. delRow funktio kokonaisuudessaan
function delRow(row,myid) {
document.getElementById(myid).innerHTML='<input type="hidden" name="del_row'+row+'" value="'+row+'"/><em onClick="chgDelrow(\'rivi'+row+'\',\''+row+'\')"> Del </em>';
}Tuo chgDelrow onkin tuolla ylempänä.
Minulla on tällä lomakkeella monta muutakin javascript-pätkää, jotka toimivat mutta tämä ei nyt tottele...
pistemies kirjoitti:
Ja mihin sitä koko sivun koodia tässä tarvitaan?
No tässähän tuli heti konkreettinen esimerkki. Luulin että ensimmäisen viestisi <em>-pätkä on olevinaan HTML:ää, mutta nyt selvisi että se onkin JavaScriptiä.
Testisivusta kokenut devaaja näkee usein parissa minuutissa, mistä joku bugi johtuu. Kaupan päälle kysyjä voi saada muitakin parannusehdotuksia. Osittaisten koodipätkien perusteella virheen löytäminen on yleensä vaikeampaa tai täysin mahdotonta, koska ongelma onkin jossain ihan muualla.
Mutta joo... Joku minua avuliaampi voi jatkaa tästä.
Tässäpä on koko sivu, rajusti lyhennettynä:
<html>
<body>
<script type="text/javascript">
function chgDelrow(idname,row){
document.getElementById(idname).innerHTML = row;
}
function delRow(row,myid) {
document.getElementById(myid).innerHTML='<input type="hidden" name="del_row'+row+'" value="'+row+'"/><em onClick="chgDelrow(\''+myid+'\',\''+row+'\')"> Del </em>';
}
</script>
<table>
<tr> <td id="rivi2" onClick="delRow('2','rivi2')">2</td>
</tr></table>
</body>
<html>Hiukan yksinkertaistin tuota delRowia, kun tuo id tulee muuttujassa myid.
Onnittelut sille, joka saa tuon toimimaan. :)
En ihan ymmärtänyt, että mikä tämän tarkoitus on, mutta veikkaan jotain tälläistä.
<html>
<head>
<title></title>
<script type="text/javascript">
function muuta(elementti, teksti) {
document.getElementById(elementti).innerHTML = (document.getElementById(elementti).innerHTML == "DEL") ? teksti : "DEL";
}
</script>
</head>
<body>
<div id="testi" onclick="muuta('testi', '2')">2</div>
</body>
</html>Luulen, että tapaukseesi on jokin parempikin ratkaisu, kun ei ole mitään ideaa alkaa kirjoittamaan sivulle samaa sisältöä kahdesti.
Macro kirjoitti:
En ihan ymmärtänyt, että mikä tämän tarkoitus on, mutta veikkaan jotain tälläistä.
// ---
Luulen, että tapaukseesi on jokin parempikin ratkaisu, kun ei ole mitään ideaa alkaa kirjoittamaan sivulle samaa sisältöä kahdesti.
Tämä on pieni osa uutta sivustoani..jonka sisältöä en vielä halua paljastaa.
Tuo mitä ehdotit voisi olla ihan toimiva, ehdin juuri itse saada tämän toimimaan näin:
<script type="text/javascript">
function chgDelrow(idname,row){
document.getElementById(idname).innerHTML='<div style="display:inline;width:100%;text-align:center;" onClick="delRow(\''+row+'\',\''+idname+'\')">'+row+'</div>';
}
function delRow(row,myid) {
document.getElementById(myid).innerHTML='<input type="hidden" name="del_row'+row+'" value="'+row+'"/><em onClick="chgDelrow(\''+myid+'\',\''+row+'\')"> Del </em>';
}
</script>
<table style="width:25px">
<tr><td id="rivi2"><div style="display:inline;width:100%;text-align:center;" onClick="delRow('2','rivi2')">2</div></td>
</tr></table>Toimintaan vaikuttava muutos tässä lienee se, että alkuperäinen onclick ei enää kohdistu koko soluun vaan ainoastaan sen sisältöön. Venytin hiukan div-sisältöä, koska tuo numero 2 on niin pieni klikkauksen kohde.
Tässä tapauksessa, kun tuo onclick poistuu solulta, se täytyy antaa uudestaan siihen tulostettavalle sisällölle, rivinumerolle.
Tässä on jäänyt kovin epäselväksi, mitä varsinaisesti haluat saada aikaan. Koodi vaikuttaa omituiselta, alkaen siitä, että funktioiden nimillä ei juuri tunnu olevan tekemistä niiden toiminnan kanssa. On hyvin mahdollista, että päädyt umpikujaan mm. siksi, että olet tehnyt vääriä oletuksia. (Esimerkiksi hidden-kenttien laittaminen solujen sisään viittaa siihen, että oletat niiden olevan jotenkin solukohtaisia.
Miksi muuten poistat onclick-määritteen solulta, kun kuitenkin ilmeisesti haluat sen olevan klikattavissa? Olisi luonnollisempaa vain muuttaa sitä, mitä klikkaaminen aiheuttaa (joko niin, että handler-funktion toiminta riippuu tilanteesta, tai niin, että vaihdat handler-funktiota).
Yucca kirjoitti:
Tässä on jäänyt kovin epäselväksi, mitä varsinaisesti haluat saada aikaan. Koodi vaikuttaa omituiselta, alkaen siitä, että funktioiden nimillä ei juuri tunnu olevan tekemistä niiden toiminnan kanssa. On hyvin mahdollista, että päädyt umpikujaan mm. siksi, että olet tehnyt vääriä oletuksia. (Esimerkiksi hidden-kenttien laittaminen solujen sisään viittaa siihen, että oletat niiden olevan jotenkin solukohtaisia.
Miksi muuten poistat onclick-määritteen solulta, kun kuitenkin ilmeisesti haluat sen olevan klikattavissa? Olisi luonnollisempaa vain muuttaa sitä, mitä klikkaaminen aiheuttaa (joko niin, että handler-funktion toiminta riippuu tilanteesta, tai niin, että vaihdat handler-funktiota).
Kyllä tämä nyt taas toimii.
Hidden kenttä on solun sisällä ihan siitä syystä että riviin liittyvät tiedot (del = riviä ollaan poistamassa, muille riveille tulostuu rivinumerot) pitää tulostaa siihen. Saisihan sen muuallekin tulostettua, joka on id:llä määritelty mutta joutuisi kirjoittamaan enemmän koodia. Jos haluaa perua rivin poiston, joutuu perumaan kahden id:n sisällön.
Tämä on aika iso taulukko, sivulla kävijä ratkaisee, kuinka suuren haluaa siitä tehdä. Taulukossa voi olla kokoa sen verran paljon, että voi vahingossa merkata väärän rivin poistettavaksi, siksi on tuo peruutus-juttu tarpeen. Nimittäin: jos taulukossa on tallentamatonta tekstiä, ne katoaa jos peruuttaa rivin poiston sivua päivittämällä. Eiköhän tämä nyt riitä?
Ps. Tuosta solusta vielä. Ilmeisesti homma olisi toiminut, jos alkuperäinen tapahtuma ollisi ollut onDblClick="delRow(jne)" ja jälkimmäinen pelkkä onClick.
pistemies kirjoitti:
Taulukossa voi olla kokoa sen verran paljon, että voi vahingossa merkata väärän rivin poistettavaksi, siksi on tuo peruutus-juttu tarpeen. Nimittäin: jos taulukossa on tallentamatonta tekstiä, ne katoaa jos peruuttaa rivin poiston sivua päivittämällä.
No joo.
Nimitän tätä koko ajan taulukoksi koska se taulukko-ominaisuus on tässä enemmän näkyvissä kuin sen lomake-ominaisuus. Lomakehan tämä oikeasti on. Sorry jos on joissakin viestiketjuissa tullut tästä vääriä käsityksiä.
pistemies kirjoitti:
Kyllä tämä nyt taas toimii.
Ihan kiva. Kai. Eipä tässä tolkkua ole muiden kannalta ollut, joten kiva jos sinä olet tyytyväinen. Hei hei.
Jos joskus oikeasti haluat apua, et varmaankaan unohda kertoa a) mitä oikeasti olet tekemässä ja b) URLIa. Hei hei. Have a nice day.
Yucca kirjoitti:
Jos joskus oikeasti haluat apua, et varmaankaan unohda kertoa a) mitä oikeasti olet tekemässä ja b) URLIa. Hei hei. Have a nice day.
Näyttikö siltä että ei saa selvää mikä on vialla:
Viestini 27.09.2011 14:30:51
Testasitko tuota lyhennettyä esimerkkiäni? Testasiko kukaan muukaan?
Joka tapauksessa kukaan ei "osannut" sanoa, miten tuo homma korjataan: lisäämällä kolme kirjainta (Dbl) tuon onClick sanan keskelle tuohon rivi2 id:n. Onneksi sentään itse sen keksin.
Jos tuo ihan oikeasti on se haluttu korjaus, niin en yhtään ihmettele sitä ettei kukaan "osannut" auttaa. Mutta hienoa että itse "osasit". Vilpittömät onnittelut "ongelman" "ratkaisemisesta".
Tämä ei tosiaan ollut minulle ihan selvää, mutta ilmeisesti ongelmana siis oli, että pitäisi käyttää onclick:n sijaan ondblclick:iä. Tuo muutoksesi on tähän kiistattomasti oikea ratkaisu. Hyvä! Jos ongelma olisi ollut kaksi onclick-handleria sisäkkäisillä elementeillä, joista halutaan laukaista vain sisempi, niin siisti ratkaisu olisi ollut eventin propagoinnin pysäyttäminen. Tai vaihtoehtoisesti koodin siistiminen ja sisemmän handlerin toiminnan siirtäminen siihen ulompaan.
Useimpien muiden kysyjien ongelmiin yleensä joku keksii ratkaisun. Tälle ei taida olla muuta selitystä kuin se, että sinun kysymyksesi tuppaavat olemaan teknisesti liian haastavia putkalaisille. Varsinkin kun JavaScript on niin huono ja vaikea kieli. :(
jlaire kirjoitti:
Tämä ei tosiaan ollut minulle ihan selvää, mutta ilmeisesti ongelmana siis oli, että pitäisi käyttää onclick:n sijaan ondblclick:iä. Tuo muutoksesi on tähän kiistattomasti oikea ratkaisu. Hyvä! Jos ongelma olisi ollut kaksi onclick-handleria sisäkkäisillä elementeillä, joista halutaan laukaista vain sisempi, niin siisti ratkaisu olisi ollut eventin propagoinnin pysäyttäminen. Tai vaihtoehtoisesti koodin siistiminen ja sisemmän handlerin toiminnan siirtäminen siihen ulompaan.
Ongelmana oli että sisempi onclick ei toiminut.
Tämä oli yksinkertaisin ratkaisu (vain 3 kirjaimen lisäys) saada se tomimaan.
Macron ehdotus oli ihan hyvä, mutta kun minulla tuli siihen sitten muutakin toimintoa funktion sisälle (rivin solujen taustavärin muuttaminen) niin se hankaloitti sen soveltamista.
Hienoja sanoja sinulla. Eventin propagointi. Pitää joskus tutkia, miten skriptiä voi sillä propeloida. :)
No tietenkin itse tekeminen on hankalampaa kuin valmiin koodin kopioiminen. Ota vaikka mallia tästä.
<html>
<head>
<title></title>
<script type="text/javascript">
function muuta(elementti, teksti) {
var e = document.getElementById(elementti);
if(e.innerHTML == "DEL") {
e.innerHTML = teksti;
e.style.background = "#ffffff";
} else {
e.innerHTML = "DEL";
e.style.background = "#ff0000";
}
}
</script>
</head>
<body>
<div id="testi" onclick="muuta('testi', '2')">2</div>
</body>
</html>En usko, että sinulla olisi kestänyt kauan keksiä tämmöinen ratkaisu.
Mitä tulee alkuperäiseen ongelmaan, niin olisi voinut yksinkertaisesti mainita, että haluaa funktion X suoritettavan tuplaklikatessa elementtiä Y. Google olisi voinut myös auttaa.
pistemies kirjoitti:
Hienoja sanoja sinulla. Eventin propagointi.
No noihan nyt on englantia, ilmeisesti jlaire on ottanut oppinsa englanninkielisestä aineistosta, eikä halunnut selvittää vastaavia suomenkielisiä termejä. Event = tapahtuma ja propagation = eteneminen.
Kun vakiintunutta suomenkielistä termiä ei ole, tai minä en tiedä mikä se on, käytän mieluummin lainasanoja kuin keksin jotain omaa. Se on kieltämättä rumaa mutta ehkäisee väärinymmärryksiä: Vertaa vaikka google-haun tuloksia termeillä javascript event propagation ja javascript tapahtuman eteneminen.
Macro kirjoitti:
Ota vaikka mallia tästä.
Kiitos!
Tuo selventää hiukan tuota javascriptin kielirakennelmaa yleensäkin. Mieleen tulee php:lle tuttu juttu, että jos $muuttuja on tämä, tehdään niin, ja jos jokin muu, tehdään muuta.
jlaire kirjoitti:
Vertaa vaikka google-haun tuloksia termeillä javascript event propagation ja javascript tapahtuman eteneminen.
Onks tämä sitä etenemisen pysäyttämistä:
function StopPropagation(e)
{
if (window.event) {
e.cancelBubble=true; // IE
} else {
e.stopPropagation(); // Others
}
}jlaire kirjoitti:
Kun vakiintunutta suomenkielistä termiä ei ole, tai minä en tiedä mikä se on, käytän mieluummin lainasanoja kuin keksin jotain omaa.
No niinhän minä juuri sanoin. Nyt ei enää tarvitsekaan keksiä omia, kun kerroin mitkä ne vakiintuneet termit on.
Googlehakujesi pointtia en oikein ymmärtänyt. Joo, ohjelmointiaiheisten juttujen tarjonta on suomeksi vähäistä, mutta sehän nyt oli tiedossa jo ennestään. Olen tälläkin foorumilla aika monta kertaa sanonut että ohjelmoijan kannattaa osata englantia.
Attribuuttien sijaan kannattaa suosia tapahtumien sitomista, ts. ei onclick="javascript..." vaan element.addEventListener. Kirjastoista löytyy myös valmiita metodeita tuplaklikkausten hallinnointiin, mm. jQuery.dblclick.
Grez kirjoitti:
kerroin mitkä ne vakiintuneet termit on.
Ok. Tapahtuma on ihan selvä, mutta luulin etenemistä pelkäksi suomennokseksi. Pidän mielessä.
Hakujen pointti oli, että joskus on vaikea arvata/selvittää mitä suomennoksella tarkoitetaan. Kun kerran eteneminen=propagation on vakiintunut ja ehkä kaikille selvä niin oli huono pointti. (Toisaalta esim. paria C++:n templateille ehdotettua suomennosta kukaan koodari, jolta olen huvikseni kysynyt, ei ole tajunnut.)
Muoks: Tähän mennessä 0/4 pätevää webbikoodaria on osannut arvata, mitä "tapahtuman eteneminen" JavaScriptissä tarkoittaa. Ja ilman tätä ketjuahan sitä olisi mahdoton selvittää. Ehkä se Grezin piireissä on vakiintunut termi, mutta jatkan edelleen lainasanojen käyttöä kun tavoitteena on tehokas kommunikointi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.