Updating value in for loop / Reseting a for loop?

Question

I'm working on my first school project so I don't have much experience in doing such web applications, that's why I decided to ask here.

How can I update the value in the for loop syntax or reset it entirely, so it iterates again, like I just reloaded it? I have another function that I decided not to show, simply because it would be useless to. What it does in the end is increments the taskCount.length by one. This part technically works but problem is, the function I'm going to show you now, once iterated, will always keep the default taskCount.length value, once the page is loaded, it never changes there. Is there any way I can update it?

Here's an example: The function above makes taskCount.length = '5' but when the page started it was taskCount.length = 4, and when I do alert(taskCount.length) from the console, I get 5. But the for loop doesn't want to change.

for (var i = 0; i < taskCount.length; i++) {    
            document.getElementsByClassName('task')[i].addEventListener('click', ((j) => {         
                return function() {
                    var shadow = document.createElement('div');
                    // Styling
                    var changingWindow = document.createElement('div');
                    // Styling
                    var changingTitle = document.createElement('p');
                    // Styling
                    var changingText = document.createElement('p');
                    // Styling
                    var changingTitleNode = document.createTextNode('Промяна');
                    var changingTextNode = document.createTextNode('Моля, изберете действие.');
                    var deleteTask = document.createElement('button');
                    var goUp = document.createElement('button');
                    var goDown = document.createElement('button');
                    var unchange = document.createElement('button');
                    // Styling
                    var deleteElementNode = document.createTextNode('Премахни задачата');
                    var goUpNode = document.createTextNode('Премести нагоре');
                    var goDownNode = document.createTextNode('Премести надолу');
                    var unchangeNode = document.createTextNode('Отказ');
                    var justBreak = document.createElement('br');
                    var justBreakAgain = document.createElement('br');
                    var justBreakOneMoreTime = document.createElement('br');
                    body.appendChild(shadow);
                    shadow.appendChild(changingWindow);
                    changingWindow.appendChild(changingTitle);
                    changingTitle.appendChild(changingTitleNode);
                    changingWindow.appendChild(changingText);
                    changingText.appendChild(changingTextNode);
                    changingWindow.appendChild(deleteTask);
                    deleteTask.appendChild(deleteElementNode);
                    deleteTask.onclick = function() {
                        document.getElementsByClassName('task')[j].parentNode.removeChild(document.getElementsByClassName('task')[j]);
                        shadow.parentNode.removeChild(shadow);
                        localStorage.setItem("listContent", document.getElementById('list').innerHTML);
                    }
                    changingWindow.appendChild(justBreak);
                    changingWindow.appendChild(goUp);
                    goUp.appendChild(goUpNode);
                    goUp.onclick = function() {
                        if (j !== 0) {
                            var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
                            var savePreviousTaskValue = document.getElementsByClassName('task')[j - 1].innerHTML;
                            document.getElementsByClassName('task')[j].innerHTML = savePreviousTaskValue;
                            document.getElementsByClassName('task')[j - 1].innerHTML = saveThisTaskValue;
                        }
                        shadow.parentNode.removeChild(shadow);
                        localStorage.setItem("listContent", document.getElementById('list').innerHTML);
                    }
                    changingWindow.appendChild(justBreakAgain);
                    changingWindow.appendChild(goDown);
                    goDown.appendChild(goDownNode);
                    goDown.onclick = function() {
                        if (j !== document.getElementsByClassName('task').length - 1) {
                            var saveThisTaskValue = document.getElementsByClassName('task')[j].innerHTML;
                            var saveNextTaskValue = document.getElementsByClassName('task')[j + 1].innerHTML;
                            document.getElementsByClassName('task')[j].innerHTML = saveNextTaskValue;
                            document.getElementsByClassName('task')[j + 1].innerHTML = saveThisTaskValue;
                        }
                        shadow.parentNode.removeChild(shadow);
                        localStorage.setItem("listContent", document.getElementById('list').innerHTML);
                    }
                    changingWindow.appendChild(justBreakOneMoreTime);
                    changingWindow.appendChild(unchange);
                    unchange.appendChild(unchangeNode);
                    unchange.onclick = function() {
                        shadow.parentNode.removeChild(shadow);
                    }
                }
            })(i))
        }

Answer 1

I don't fully understand you question, but maybe some recursion is what you need. Something along the lines of:

loop(5);

function loop(xTimes) {

   for (var i = 0; i < xTimes; i++) {

        if (newXTimes !== xTimes) {

            loop(newXtimes);
            break;
        }
   }

}

Maybe set newxTimes as a global variable that can be accessed inside loop.

Answer 2

As a matter of the page reloading, you can always save the value as a cookie and reuse it again and again. You can update it whenever you want.

Answer 3

In case someone "from the future" reads this question and it doesn't have any answers, I came up with the solution to reload the page everytime you change the value. Still, I'd like to do it without reloading.