如何從JS中的匿名內部函數返回值？

Question

我的頁面允許用戶添加和刪除輸入框以輸入搜索條件。 允許他們添加這些的函數返回一個值。 （計數變量來跟蹤量，因爲我要的字段限制在五。）

我調用該函數上的一個按鈕的點擊這裏：

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

正如你所看到的價值計數返回到腳本。

以下是添加輸入字段的相關JS。 （ADD功能還包含一個內部函數用於除去輸入字段）

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

} 

希望你能理解這個問題，如果不是我做了一個簡短的視頻來說明吧。

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

Answer 1

因爲你addField功能有一個名爲count變量，在全球範圍內的count變量不能說count訪問。此外，當您的內部函數引用count時，它將成爲閉包中的一個存儲值，不會在多個調用addField之間共享。這對移除正確的物品很有用，但對於保持計數不利。我建議這樣的：

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

只要你並不需要IDS是連續的，從您的計分您的ID將讓您的設計更容易編寫和維護。