CODEWITHSUNDEEP
javascriptdom
Anon Omus
Anon Omus

Reputation: 381

How to return a value from an anonymous inner function in JS?

My page allows users to add and remove input boxes to enter search terms. The function that allows them to add these, returns a value. (a count variable to keep track of the amount as I want to limit the fields to five.)

I call the function on the click of a button here:

<input type="button" value="+" id="add" onclick="count = addField(count);"/>

As you can see the value of count is returned to the script.

The following is the relevant JS for adding the input field. (The add function also contains an inner function for removing an input field)

//Starts at 1, as there is always at least one input box.
var count = 1;

function addField(count) {

    //Only add if the limit is not reached:
    if (count<=4){

    //Increase the count by 1, alert for demo purposes:
    count++;
    alert(count);

    //Create a div to hold the new input and a new button to remove it:
    var divv = document.createElement("div");
    divv.setAttribute("id", "div"+count);
    divv.setAttribute("class", "divvv")
    inputContainer.appendChild(divv);

    var id = "tag"+count;
    var newField = document.createElement("input");
    newField.setAttribute('type', 'text');
    newField.setAttribute('class', 'field');
    newField.setAttribute('id', id);


    divv.appendChild(newField);

    var deleteCont = document.createElement("div");
    var divId = "cont"+count;
    deleteCont.setAttribute("id", "cont"+count);
    deleteCont.setAttribute("class", "remCont");
    divv.appendChild(deleteCont);

    var removeId = "remove"+count;
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "-");
    remove.setAttribute('class', 'remove');
    remove.setAttribute('id', removeId);


    //This part is the problem, When the remove button is clicked it WILL remove the 
    //Relevant div, but I can't find a way to reduce the count after this (i.e, allow
    //the user to re-add new fields after reaching the 5 limit and removing some.
    //Basically it allows the user to add lets say 3 (Total now at 4). If they then 
    //remove all three it should allow them to add up to 4 again. But it will only 
    //allow one. Since the count was at 4 even after they removed 3.
    remove.onclick = function () { 

        var element = document.getElementById("inputContainer");
        divv.parentNode.removeChild(divv);
    //I tried something like:
    // count = count - 1;
    //But obviously the value that returns from the addField function is the count 
    //outside this inner function.


     };

    deleteCont.appendChild(remove);

    return count;
    } 

}

Hopefully you can understand the issue, if not I have made a short video to illustrate it.

Demo: http://tinypic.com/player.php?v=11ad7j9%3E&s=8#.U1g7kvldVvF

Upvotes: 0

Views: 82

Answers (1)

aebabis
aebabis

Reputation: 3705

Because your addField function has a variable called count, the count variable in the global scope cannot be accessed by saying count. Additionally, when your inner function references count, it will be a stored value in a closure that is not shared across multiple invocations of addField. This is good for removing the correct item but bad for maintaining the count. I recommend this:

<input type="button" value="+" id="add" onclick="addField()"/>

JS

//Starts at 1, as there is always at least one input box.
var count = 1;
var idGen = 1; // Use to ensure input ids are unique

function addField() { // No longer passing count;
    var id = idGen++; // Each field gets a different id;
    count++; // Count goes up.
    ...
    button.onclick = function() {
        ...
        count--;
    }
    ...
    return; // No longer returning count;
}

As long as you don't need ids to be consecutive, separating your ids from your count will make for a design that is easier to write and maintain.

Upvotes: 1

Related Questions