Question

我的页面允许用户添加和删除输入框以输入搜索词。允许它们添加这些函数的函数返回一个值。（一个计数变量，用于跟踪金额，因为我想将字段限制为五个。）

我在点击按钮时调用该功能：

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

如您所见，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;
}

只要您不需要ID是连续的，将您的ID与计数分开将使得设计更容易编写和维护。

如何从JS中的匿名内部函数返回值？

1 个答案: