Calling a function via created HTML code

Question

EDIT:

After some re-working to use another method (createElement) I've gotten my code to the point where it can properly call on elements, however it only uses the parameters of the last banner made at the end of the function. Here's the snippet of what I have to date.

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);
 }

---

First time posting here, my apologies in advance for being a total nub.

So, to start off, I'm working on a page to assemble medieval-looking banners for a community that I'm part of, so in order to make it easy on myself to add/remove different banners in the future I made a modular HTML system using 'for'. When it's created it changes the names of the files it access to the names in an Array so that I only have to change the list and add a file. The HTML it creates is a table so that I can insert the images with two columns.

That table is then used for the selection menu as to which banner/curtain rod you'd be selecting. I have an ID attached to each <tr> based on the banner within (done during the creation of the HTML). Now I need to have it so that when they're clicked for selection, the sample image shown changes. Within the created HTML I created an onclick="select( Insert Banner Name Here )" in an effort to have the banner info transfer over to the next function, which is a switch.

I found out later that, from what I've seen, the function transfers a variable and not the word/data itself. I'm trying to think of a way I can code this so that, when called, the function knows what banner was clicked. When I tested the code it would always return [object HTMLTableCellElement].

In case I'm not making sense, this image may help. (Apologies for the bright colors, they're there so I can see the different divs easier).

The banners being selected are on the right, and the preview is on the left. The images on the right are within a table within a div (where the scroll bar is). That's where I'm trying to call my switch function from.

If anyone knows a way this is possible, or a better way of going about it I'd love for some help with it.

Answer 1

You might want to look into the document.createElement function.

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

With this you could do something like:

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);

This way you have an object approach to your elements and thereby better control over your event listeners.

EDIT 1:

Example using anonymous functions to maintain the current loop state:

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);