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

我已在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>

函数myFunction（）{
var x=document.createElement（“li”）；
var t=document.createTextNode（“Coffee”）；
x、 儿童（t）；
document.getElementById（“myList”）.appendChild（x）；
}

---

但每次我点击“尝试”时，我都可以在列表中创建新项目，但我希望限制为1或2。当用户点击按钮时，他应该只能创建一个额外的项目。如何执行此操作？

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

比如：

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

风险限额=1
var currentAmount=0；
函数myFunction（）{
//检查一下，我们还没有达到极限。
如果（当前金额<限额）{
var x=document.createElement（“li”）；
var t=document.createTextNode（“Coffee”）；
x、 儿童（t）；
document.getElementById（“myList”）.appendChild（x）；
currentAmount++；//增加我们的计数
}
}

或者，如果你想变得更时尚，你可以使用：

//使用函数包装，这样我们就不会使全局命名空间混乱
//限额和当前金额
（功能（）{
风险限额=1
var currentAmount=0；
函数myFunction（）{
如果（当前金额<限额）{
var x=document.createElement（“li”）；
var t=document.createTextNode（“Coffee”）；
x、 儿童（t）；
document.getElementById（“myList”）.appendChild（x）；
currentAmount++；
}
}
})()

首先，从列表中提取子节点，并检查您现在有多少个“li”元素

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.");
    }
}

函数myFunction（）{
var childNodes=document.getElementById（“myList”）.childNodes；
var MAX=5；
var计数=0；
for（子节点中的变量i）{
var node=childNodes[i]；
if（node.nodeName==“LI”| | node.nodeName==“LI”）{
计数++；
}
}
如果（计数<最大值）{
var x=document.createElement（“li”）；
var t=document.createTextNode（“Coffee”）；
x、 儿童（t）；
document.getElementById（“myList”）.appendChild（x）；
}否则{
警惕（“我吃饱了，请不要再喂我了。”）；
}
}

有趣的方法，我没有想到先检查当前的列表元素+1.我认为如果你计划以后删除元素，你的答案会更有效。谢谢，它有效。我们现在是否有可能删除我们添加的元素？如果我的答案（或Prakar的答案）对您有效，请接受它作为已接受的答案。如果您还有其他问题，请将其作为单独问题添加。记住先展示你尝试过的东西。

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.");
    }
}