Keskustelu: Nettisivujen teko: JavaScript ongelma

Terve!

Olisi tälläinen pieni JavaScript testailu (alempana koko koodi), mutta ongelmana on:

koodissa on kohta, jossa tehdään näin (tämä toimii):

option.onclick = function(){ return testiVain(rowId)}

mutta haluaisin toiminnon näin, jotta pystyn joka riville määräämään eri function:

{'teksti':'Auto', 'value':'1', 'tyyli':'valikko', 'click':'return testiVain(rowId)'},

option.onclick = function(){ arvot[i].click }

tuo ei kuitenkaan toimi, koska ilmeisesti return ei saisi olla ' ' sisällä tai ei ainakaan noin pysty käyttämään testiVain functiota?

Mikä tähän ratkaisuksi? ' ' ei voi kuitenkaan ottaa pois, koska silloin scripti herjaa virhettä.

<script type="text/javascript">

function testiVain(value){
return value
}

function options(rowId){

var td = document.createElement('select');

var arvot = [
    {'teksti':'Auto', 'value':'1', 'tyyli':'valikko', 'click':''},
    {'teksti':'Ihminen', 'value':'2', 'tyyli':'valikko', 'click':''},
    {'teksti':'Eläin', 'value':'3', 'tyyli':'valikko', 'click':''},
    {'teksti':'Kasvi', 'value':'4', 'tyyli':'valikko', 'click':''}
];

var arrayPituus = arvot.length;

for (i=0; i < arrayPituus; i += 1) {

    var option = document.createElement('option');
    option.appendChild(document.createTextNode(arvot[i].teksti));
    option.setAttribute('value', arvot[i].value);
    option.setAttribute('class', arvot[i].tyyli);
    option.onclick = function(){ return testiVain(rowId)}

    td.appendChild(option);
}
return td;
}

var rowId = 1;
options(rowId);

</script>

Mod. korjasi kooditagit!

Voit esimerkiksi kehitellä sen funktion suoraan sinne arvojen sisään:

var arvot = [
    {'teksti':'Auto', 'value':'1', 'tyyli':'valikko', 'click':function(value) {
/* FUNKTIO TÄSSÄ */
} },
    {'teksti':'Ihminen', 'value':'2', 'tyyli':'valikko', 'click':function(value) {
/* FUNKTIO TÄSSÄ */
} },
    {'teksti':'Eläin', 'value':'3', 'tyyli':'valikko', 'click':function(value) {
/* FUNKTIO TÄSSÄ */
} },
    {'teksti':'Kasvi', 'value':'4', 'tyyli':'valikko', 'click':function(value) {
/* FUNKTIO TÄSSÄ */
} }
];


...


option.onclick = arvot[i].click(rowId);

Se että onko tämä paras mahdollinen toteutus on sitten oma asiansa, mutta muistaakseni tämän pitäisi toimia.

Hyvä idea tuokin, mutta tässä tapauksessa pitäisin nuo functiot mielellään erillisenä ihan selvyyden vuoksi. Esimerkiksi jos functioiden koko on suuri, niin menee vähän epäselväksi.

Voit viitata funkitoihin niiden nimillä.

function f1() { ... }
function f2() { ... }
function f3() { ... }

var arvot = [
    { 'teksti': 'abc', 'click': f1 },
    { 'teksti': 'def', 'click': f2 },
    { 'teksti': 'xyz', 'click': f3 }
];

// ...

option.onclick = arvot[i].click;

Edit: Ohops, en huomannut tuota rowId-muuttujaa. Sen voi antaa funktioille parametrina näin:

var arvot = [
    { 'teksti': 'abc', 'click': function() { return f1(rowId); } },
    { 'teksti': 'def', 'click': function() { return f2(rowId); } },
    { 'teksti': 'xyz', 'click': function() { return f3(rowId); } }
];

Toiston voi välttää käyttämällä apufunktiota, jos haluaa.

Mitä jos functioon otetaan parametri sisään ja palautetaan arvo?
Kuten tässä:

function f1(value){
return value
}

Miten tämän käy?

{ 'teksti': 'abc', 'click': f1 }

option.onclick = arvot[i].click;

Mod. laittoi oikeat kooditagit!

Lisäsin aiempaan viestiini sen mitä varmaan haluat tehdä juuri ennen kuin vastasit, kokeile toimiiko se. Jos haluaa hienostella, niin...

function bind(f, x) {
    return function() {
        return f(x);
    };
}

var arvot = [
    { 'teksti': 'abc', 'click': bind(f1, rowId) },
    { 'teksti': 'def', 'click': bind(f2, rowId) },
    { 'teksti': 'xyz', 'click': bind(f3, rowId) }
];

jlaire:n ratkaisut toimii hienosti, eli ihan älyttömät kiitokset! Meni aika kauan kun itse yritin miettiä tuota.