Function call through the generated HTML code

Question

EDIT:

After some repeated work using another method (createElement) I got my code to such an extent that it can correctly access the elements, however it only uses the parameters of the last banner created at the end of the function. Here is a snippet of what I have today.

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

---

For the first time sending here, my apologies in advance for being a complete piece.

So, for starters, I’m working on a page to collect medieval banners for the community in which I participate, therefore, to facilitate the addition / removal of different banners in the future, I created a modular HTML system using "for". When it is created, it changes the names of the files to which it refers to the names in the array, so I only need to change the list and add the file. The HTML that it creates is a table so that I can insert images with two columns.

This table is then used for the selection menu according to which you select the banner / curtain rod. I have an identifier attached to each <tr> based on the banner inside (executed during HTML creation). Now I need to do this so that when I click on the selection, the displayed sample image changes. Inside the generated HTML, I created onclick = "select (Insert Banner Name Here)" to pass the banner information to the next function, which is the switch.

Later, I found out that from what I saw, the function passes the variable, not the word / data itself. I'm trying to think about how I can encode this so that when I call the function will know which banner was clicked. When I tested the code, it always returned [HTMLTableCellElement object].

In case I don't make sense, this image may help. (Apologies for the bright colors, they are there, so I see that different divs are easier).

Selected banners are on the right, and previews are on the left. The images on the right are inside the table in the div (where the scroll bar). This is where I try to call the switch function from.

If anyone knows the way this is possible, or the best way around this, I would love to help him.

Answer 1

You might want to examine the document.createElement function.

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

With this, you can 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); 

Thus, you have an object approach to your elements and thus better control over event listeners.

EDIT 1:

An example of using anonymous functions to maintain the current state of the loop:

 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

So, what I ended up with is reworking it with a div. Having done this, I was able to set an identifier for each block, and from there send onclick to the "filter" function. Then the filter function used the .id elements to retrieve what it was, and then passed that information to my switch function. Here is the code for those interested;

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

And filter function;

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

Hope this helps someone else if they find this post.