Closures Inside of Loops - Create a link and link function for each element in an array
<p>I am working on a JavaScript web app that stores sets (stacks) of flashcards in an array. </p>

<p>Right now I am having an issue with closures inside of loops. I reviewed this example (<a href="http://stackoverflow.com/a/15466863/1822824">http://stackoverflow.com/a/15466863/1822824</a>) and attempted to implement something similar but I am receiving an error: "TypeError: 'null' is not an object (evaluating 'document.getElementById(temp)')".</p>

<p>The web app should list all of the sets (stacks) of flashcards as links, when you click on a link it alerts you with the name of the flashcard stack that you clicked on. Everything worked fine until I attempted to add the link part that alerts you.</p>

<p>Fiddle: <a href="http://jsfiddle.net/xmYug/" rel="nofollow">http://jsfiddle.net/xmYug/</a></p>

<p>Below is my code:</p>

<pre><code>&lt;p&gt;
&lt;strong&gt;Flashcard Stack Name:&lt;/strong&gt;
&lt;input type="text" id="textStackName"&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;strong&gt;Enter one flashcard per line, seperate the front and back of each flashcard with a comma:&lt;/strong&gt;&lt;br&gt;
&lt;textarea name="textarea" id="textareaFlashcards" cols="45" rows="15"&gt;&lt;/textarea&gt; 
&lt;/p&gt;
&lt;p&gt;
&lt;input type="submit" id="buttonSubmit" value="Submit"&gt;
&lt;/p&gt;
&lt;div id="allStacks"&gt;
&lt;/div&gt;

&lt;script&gt;
var funcs = [];

function createfunc(i) {
    var temp = "link" + i;

    return document.getElementById(temp).onclick = function() {
        // Alert the user of the stack name they just clicked on
        alert("Stack name: " + allStacks[i].stackName);
    };
}

/* Constructors */
// Constructs a new stack of flashcards - a stack of flashcards is usually about a single topic such as States &amp; Capitals
function newStackConstructor(stackName) {
    this.stackName = stackName;
    this.stack = new Array();
}

// Constructs a new flashcard - a stack can have an unlimited number of flashcards
function newFlashcardConstructor(flashcardFront, flashcardBack) {
    this.flashcardFront = flashcardFront;
    this.flashcardBack = flashcardBack;
}

// Contains all of the flashcard stacks
var allStacks = new Array();

// SAMPLE DATA //////////////////////////////////////////////////////////////////////
// Make a test stack
allStacks.push(new newStackConstructor("States &amp; Capitals"));

// Test data
allStacks[0].stack.push(new newFlashcardConstructor("Alabama", "Montgomery"));
allStacks[0].stack.push(new newFlashcardConstructor("Alaska", "Juneau"));
allStacks[0].stack.push(new newFlashcardConstructor("Arizona", "Phoenix"));
////////////////////////////////////////////////////////////////////////

buttonSubmit.onclick = function () { 
    newFlashcardStack();
};

// Make a new flashcard stack
function newFlashcardStack() {
    allStacks.push(new newStackConstructor(textStackName.value));

    var textareaFlashcardsTemp = textareaFlashcards.value;

    // Split flashcards by line break
    var flashcards = textareaFlashcardsTemp.split("\n");

    for (var i = 0; i &lt; flashcards.length; i++) {

        // Split front &amp; back of flashcards by comma
        flashcard = flashcards[i].split(",");

        allStacks[(allStacks.length - 1)].stack.push(new newFlashcardConstructor(flashcard[0], flashcard[1]));
    }

    // Update stack display to display all of the stacks and the new stack
    displayAllStacks();
}

// Display all flashcard stacks
function displayAllStacks() {
    // Clear stack display
    document.getElementById("allStacks").innerHTML = "";

    for (var i = 0; i &lt; allStacks.length; i++) {
        funcs[i] = createfunc(i);

        document.getElementById("allStacks").innerHTML += '&lt;p&gt;&lt;a href="#" id="link' + i + '"&gt;' + allStacks[i].stackName + '&lt;/a&gt;&lt;/p&gt;';
    }
}

displayAllStacks();
&lt;/script&gt;
</code></pre>
