How to set up limit of object creation in Javascript list?

Question

I have ordered list in Html:

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


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

and this is Javascript code, to create new object in this list:

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

but everytime when I click "Try it" I can create new item in list, but I want to have a limit of 1 or 2. When user clicks on button, he should be able to create only one extra item. How can I do this?

Thanks, it works. And have we now possibility to delete elements that we added? — Giorgi, Feb 24 '16 at 09:04
If my answer (or Prakhar's) worked for you, please accept it as the accepted answer. If you have another question, please add it as a separate question. Remember to show what you have tried first. — Matt Lishman, Feb 24 '16 at 09:24

score 3 · Accepted Answer · edited May 23 '17 at 12:07

You could declare a variable outside of the function that stores the current amount. Then, check that variable.

Something like:

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

Or, if you want to get fancier you could use a 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>

score 1 · Answer 2 · answered Feb 24 '16 at 08:51

First, fetch child nodes from your list and check how many "li" elements you have right now.

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

Interesting approach, I hadn't thought of checking the current list elements first. +1. I think your answer works better if you plan to remove elements later. — Matt Lishman, Feb 24 '16 at 08:55

How to set up limit of object creation in Javascript list?

2 Answers2