Question

我在Html中订购了列表：

<ol id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ol>


<button onclick="myFunction()">Try it</button>

这是Javascript代码，用于在此列表中创建新对象：

<script>
function myFunction() {
    var x = document.createElement("li");
    var t = document.createTextNode("Coffee");
    x.appendChild(t);
    document.getElementById("myList").appendChild(x);
}
</script>

但是每当我点击“试试”时我都可以在列表中创建新项目，但我希望限制为1或2.当用户点击按钮时，他应该只能创建一个额外的项目。我怎么能这样做？

Answer 1

您可以在存储当前金额的函数之外声明一个变量。然后，检查该变量。

类似的东西：

<script>
    var limit = 1
    var currentAmount = 0;
    function myFunction() {

        //Check we haven't reached our limit.
        if(currentAmount < limit){
            var x = document.createElement("li");
            var t = document.createTextNode("Coffee");
            x.appendChild(t);
            document.getElementById("myList").appendChild(x);
            currentAmount++; //Increment our count
        }

    }
</script>

或者，如果你想获得更高级，你可以使用closure：

<script>
    //Wrap in a function to we don't clutter our global namespace with
    // limit and currentAmount
    (function(){
        var limit = 1
        var currentAmount = 0;
        function myFunction() {

            if(currentAmount < limit){
                var x = document.createElement("li");
                var t = document.createTextNode("Coffee");
                x.appendChild(t);
                document.getElementById("myList").appendChild(x);
                currentAmount++;
            }

        }
    })()
</script>

Answer 2

首先，从列表中获取子节点并检查有多少＆＃34; li＆＃34;你现在拥有的元素。

function myFunction() {
    var childNodes = document.getElementById("myList").childNodes;
    var MAX = 5;

    var count = 0;
    for(var i in childNodes){
        var node = childNodes[i];
        if(node.nodeName == "LI" || node.nodeName == "li"){
            count++;
        }
    }

    if(count < MAX){
        var x = document.createElement("li");
        var t = document.createTextNode("Coffee");
        x.appendChild(t);
        document.getElementById("myList").appendChild(x);   
    }else{
        alert("I'm full. Please don't feed me more.");
    }
}

如何在Javascript列表中设置对象创建限制？

2 个答案: