Korvic February 2016

Calling a function via created HTML code

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 o

Answers


Emil S. Jørgensen February 2016

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 


Korvic February 2016

So, what I ended up doing was re-working it with divs instead. Doing that I was able to set the ID for each block, and from there send an onclick to a 'filter' function. The filter function then used the elements .id to extract which was which, and then send that info off to my switch function. Here's 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 the filter function;

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

Hope this helps someone else if they find this post.

Post Status

Asked in February 2016
Viewed 1,006 times
Voted 12
Answered 2 times

Search




Leave an answer