.length doesn't see li on the page?

Question

JavaScript

Hello!
My script adds li to the page and then the number of li on the page should be displayed, but .length does not see the li on the page

var task = $('.task-li').length;
    var doneTask = $('.done').length;
    
    setInterval('$(".task-all").text('+ task +')', 1000);
    
    function addTask() {
        var id = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
        var text = $('input').val();
        var allTask = $('.task-all').val();
        
        if (text != "") {
            $('input').css("background", "#adc1f1");
            $('#all-task').append("<li class='task-li' id='task-"+ id +"'><h3>"+ text +"</h3><span id='remove-"+ id +"'>-</span></li>");  
            $('input').val('');
        } else {
            $('input').css("background", "#f3948d");
        }
    }

Answer 1

Well, task and doneTask receive length only 1 time, when the page is loaded. The script adds elements, but the value of the variables does not change.

Answer 2

it won't work for you. First I would advise you to read about the scope of variables. Or you didn't formulate the question correctly. Either I can't understand it :) you set setInterval every second. it will show the same value.. It will not define it dynamically. Describe the task in more detail, because it is not clear from this piece of code what kind of logic you want to organize. The question is one thing and the script another :)