11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Malgré beaucoup de recherche je n'arrive pas a résoudre mon problème donc je demande ici si quelqu'un peut m'aider.
Mon problème est que quand j'ajoute des éléments html depuis JavaScript, j'ai un compteur de cette élément en question, mais lors de l'ajout mon compteur augmente pas et reste fixe sur le nombre d'élément mit initialement, Comment faire pour qu'il augmente aussi avec les ajouts d'éléments.

Merci de votre aide

Le html:

<div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Complete online JavaScrip course</p>
</div>
<div class="NewTODO">
      <div class="CheckBox"></div>
      <p class="NameToDo">Jag around the park 3k</p>
</div>

<p id="ItemLeft"></p>

Le js :

function ItemLeft() {
    var ItemLeft = document.getElementById("ItemLeft");
    var n = 0

    for(let i = 0; i < CheckBox.length; i++) {
        if (CheckBox[i].style.background === "") {
            n++;
        };
    };

    ItemLeft.innerHTML = n + " items left";
};

function AddTodo() { // Lancement de la fonction en appuiant sur Enter

    var NewDiv = document.createElement("div"); // Creation Premiere div
    NewDiv.classList.add("NewTODO"); // Ajout de la class NewTODO


    var NewDiv2 = document.createElement("div"); // Creation Premiere div
    NewDiv2.classList.add("CheckBox"); // Ajout de la class CheckBox
    NewDiv.appendChild(NewDiv2); // Ajout de la second div a la premiere 


    var NewP = document.createElement("p"); // Creation d'un p
    NewP.classList.add("NameToDo"); // Ajout de la class NameToDo


    var InputTask = document.getElementById("InputTask").value; // Recuperation du text du input
    NewP.append(InputTask); // Ajout du Text dans le p
    NewDiv.appendChild(NewP); // Ajout du p a la premiere div

    if (InputTask === "") {
        
    }
    else {
        var Content = document.querySelector(".Content");
        Content.append(NewDiv)
    }

    ItemLeft()
}