Discussion :

[Solenhya]

Bonjour à tous,

J'ai un souci que je n'arrive pas à résoudre en JS avec les checkbox. Je suis en train de coder une to-do list où lorsque je clique sur un bouton cela m'ouvre une fenêtre pour que je tape au clavier la nouvelle tache. La nouvelle tache apparait donc à l'écran avec une checkbox que je coche lorsque la tache est terminé.
Quand une tache n'est pas réalisé elle reste dans la section "a faire", lorsque je réalise une tache je coche la checkbox et celle ci passe dans la section "fait"(voir photo).



J'aimerai pouvoir, lorsque je décoche une tache, que celle ci retourne dans la catégorie "A faire". Le souci c'est que cela ne fonctionne pas dans mon code et je ne comprend pas pourquoi.

Voici mon code ci dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
//Ajouter une nouvelle tache 
addElt.addEventListener("click", addTask);
 
const addTask = (e) => {
 
    //ouvre une fenêtre textuelle pour renseigner sa tâche
    let taskName = window.prompt('Renseigner une nouvelle tâche',e.target.textContent);
    //Si une tâche est renseigné :
    if (taskName!==null){
        //Création d'une nouvelle ligne de lisgne avec une checkbox + tache
        let liElt = document.createElement("li");
        let ulElt = document.getElementById("liste");
        let checkBoxElt = document.createElement("input");
        let labelElt = document.createElement("label");
        let idt = getId(taskList,idTab); //appel de la fonction qui génère un id unique pour les checkbox
 
        checkBoxElt.type = 'checkbox';
        checkBoxElt.id = idt;
        checkBoxElt.value = idt;
        liElt.id = "li" + idLi;
        checkBoxElt.onchange= doneTask; 
        labelElt.setAttribute("for", checkBoxElt.id );
        labelElt.textContent = taskName;
 
        ulElt.appendChild(liElt);
        liElt.appendChild(checkBoxElt);
        liElt.appendChild(labelElt);
 
        let newTask = new task(taskName,false,idt);
        taskList.push(newTask);
        idLi++; // on incrémente l'id à chaque nouvelle tache
    }
}
 
//Fonction qui gère la réalisation d'une tache
const doneTask = (e) => {
    let thisId = e.target.parentElement.id;  
    //Si aucune tâche ne sont encore réalisé :
    if ( document.getElementById("done") === null){
        //Création de la section "done"
        let sectionElt = document.createElement("section");
        let titleElt = document.createElement("h2");
        let ulElt = document.createElement("ul");
        titleElt.textContent = "Fait";
        sectionElt.id = "done";
        ulElt.id = "checkListDone";
 
        document.getElementById("todo").appendChild(sectionElt);
        sectionElt.appendChild(titleElt);
        sectionElt.appendChild(ulElt);
 
        document.getElementById("checkListDone").style.textDecoration = "line-through";
    } 
    //Si la checkbox est bien coché, on duplique la tache, on l'insère dans la section "done" et on la supprime de la section "todo"
    if (e.target.checked){
        let liElt = document.createElement("li");
        liElt = document.getElementById(thisId).cloneNode(true);
        // Récupération de l'id pour la tache réalisé
        let doneId = e.target.id.match(/\d+/g).join('');
        liElt.id = "done" + doneId;
        document.getElementById("checkListDone").appendChild(liElt);
        //Suppression de la tache dans la section "Fait"
        document.getElementById("liste").removeChild(document.getElementById(thisId));
 
        //On passe le booléen "done" du tableau tasklist à true
        for (let i in taskList){
            if (e.target.id === taskList[i].idt){
                taskList[i].done = true;
            }
        } 
    } else {
        let liElt = document.createElement("li");
        liElt = document.getElementById(thisId).cloneNode(true);
        let returnId = e.target.id.match(/\d+/g).join('');
        liElt.id = "li" + returnId;
        document.getElementById("liste").appendChild(liElt);
        document.getElementById("checkListDone").removeChild(document.getElementById(thisId));
    }
}

Pour l'instant ma fonction fonctionne quand je coche ma checkbox, mais lorsque je veux la décocher, plus rien. Auriez vous une idée de pourquoi cela ma fonction "doneTask" n'est pas appelé à chaque fois que je coche/décoche ma checkbox ?

J'espère que j'ai pu être clair.

Merci d'avance pour vos réponse.