Chiamare una funzione tramite codice HTML creato

Question

EDIT:

Dopo un po 'ri-lavorare per utilizzare un altro metodo (createElement) ho ottenuto il mio codice al punto in cui può correttamente chiamare su elementi, tuttavia utilizza solo il parametri dell'ultimo banner realizzato alla fine della funzione. Ecco il frammento di ciò che ho fino ad oggi.

function load() { 
var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"]; 
var table = document.createElement("table"); 
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) { 
    var row = document.createElement("tr"); 
    var td = document.createElement("td"); 
    var td2 = document.createElement("td"); 
    var temp1 = staffB[staffI]; 
    var temp2 = staffB[staffI + 1]; 
    for (var i = 0; i < 10; i++) { 
     td.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="100%">'; 
     td.onclick = function() { select (temp1) } 
     td2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="100%">'; 
     td2.onclick = function() { select (temp2) } 
    } 
    row.appendChild(td); 
    row.appendChild(td2); 
    table.appendChild(row); 
} 
document.getElementById("staff").appendChild(table); 
} 

---

Prima volta distacco qui, le mie scuse in anticipo per essere un nocciolo totale.

Quindi, per iniziare, sto lavorando a una pagina per assemblare banner di aspetto medievale per una comunità di cui faccio parte, così per rendere più facile per me stesso aggiungere/rimuovere diversi banner nel futuro ho creato un sistema HTML modulare usando 'for'. Quando viene creato cambia i nomi dei file che accede ai nomi in una matrice in modo che sia sufficiente modificare l'elenco e aggiungere un file. L'HTML che crea è una tabella in modo che io possa inserire le immagini con due colonne.

Tale tabella viene quindi utilizzata per il menu di selezione in base a quale banner/asta di tenda verrà selezionato. Ho un ID allegato a ogni <tr> basato sul banner all'interno (fatto durante la creazione dell'HTML). Ora ho bisogno di averlo in modo che quando vengono cliccati per la selezione, l'immagine di esempio mostrata cambia. All'interno del codice HTML creato ho creato un onclick = "seleziona (Inserisci nome banner qui)" nel tentativo di trasferire le informazioni del banner alla funzione successiva, che è un interruttore.

Ho scoperto in seguito che, da quello che ho visto, la funzione trasferisce una variabile e non la parola/dati stessa. Sto cercando di pensare a un modo in cui posso codificare questo in modo che, quando chiamato, la funzione sappia quale banner è stato cliccato. Quando ho testato il codice, restituirebbe sempre [object HTMLTableCellElement].

Nel caso in cui non abbia senso, questa immagine può essere d'aiuto. (Chiedo scusa per i colori vivaci, sono lì così posso vedere le diverse div più facili).

I banner di essere selezionate sono a destra, e l'anteprima si trova sulla sinistra. Le immagini a destra sono all'interno di una tabella all'interno di una div (in cui la barra di scorrimento è). Ecco dove sto cercando di chiamare la mia funzione di commutazione da.

Se qualcuno sa come è possibile, o un modo migliore di farlo, mi piacerebbe un po 'di aiuto.

Answer 1

Si potrebbe voler esaminare la funzione document.createElement.

http://www.w3schools.com/jsref/met_document_createelement.asp

Con questo si potrebbe fare qualcosa di simile:

var staffB = ["http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png", "http://i.stack.imgur.com/ziZF1.png"]; 
var table = document.createElement("table"); 
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) { 
    var row = document.createElement("tr"); 
    var td = document.createElement("td"); 
    for (var i = 0; i < 10; i++) { 
     td.innerHTML = '<img src=' + staffB[staffI] + '.png height="auto" width="100%">'; 
    } 
    td.onclick = function() { 
     //Whatever function you like 
     alert(1); 
    } 
    row.appendChild(td); 
    table.appendChild(row); 
} 
document.body.appendChild(table); 

In questo modo si ha un approccio oggetto per gli elementi e quindi un migliore controllo dei listener di eventi.

EDIT 1:

Esempio di utilizzo di funzioni anonime per mantenere lo stato del loop di corrente:

var staffB = ["http://www.faster-minis.com/site/speed-mini.jpg", "http://i.stack.imgur.com/ziZF1.png"]; 
var table = document.createElement("table"); 
for (var staffI = 0; staffI < staffB.length; staffI++) { 
    var row = document.createElement("tr"); 
    for (var i = 0; i < 10; i++) { 
     var td = document.createElement("td"); 
     td.innerHTML = '<img src=' + staffB[staffI] + ' height="auto" width="100%">'; 
     //Anonymous scope to retain loop state 
     (function(a){ 
      td.onclick = function() { 
       //Whatever function you like 
       //In here, "a" is the current "i" 
       alert(a); 
       alert(i); 
      } 
     })(i); 
     row.appendChild(td); 
    } 
    table.appendChild(row); 
} 
document.body.appendChild(table); 

Answer 2

Allora, che cosa ho finito per fare è stato ri-lavorare con div invece.In questo modo sono stato in grado di impostare l'ID per ogni blocco, e da lì inviare un onclick a una funzione 'filtro'. La funzione di filtro ha quindi utilizzato gli elementi .id per estrarre quale era, e quindi inviare tali informazioni alla mia funzione di commutazione. Ecco il codice per chi è interessato;

var staffB = ["Admin", "GM", "Dev", "FM", "Lore", "App", "Magic", "Event"]; 
for (var staffI = 0; staffI < staffB.length; staffI = staffI + 2) { 
    var co1 = document.createElement("div"); 
    var co2 = document.createElement("div"); 
    var wide = (282/2 - 10); 

    co1.setAttribute("id", staffB[staffI]); 
    co1.setAttribute("onclick", "filter(this)"); 
    co1.style.float = "left"; 
    co1.style.width = wide; 
    co1.innerHTML = '<img src=banners/' + staffB[staffI] + '.png height="auto" width="' + wide + '">'; 

    co2.setAttribute("id", staffB[staffI + 1]); 
    co2.setAttribute("onclick", "filter(this)"); 
    co2.style.float = "right"; 
    co2.style.width = wide; 
    co2.innerHTML = '<img src=banners/' + staffB[staffI + 1] + '.png height="auto" width="' + wide + '">'; 

    document.getElementById("staff").appendChild(co1); 
    document.getElementById("staff").appendChild(co2); 
} 

E la funzione filtro;

function filter(ele) { 
    var id = ele.id; 
    select (id); 
} 

Spero che questo aiuti qualcun altro se trovano questo post.