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.

[javatwister]

Bonjour,

Peut-être un problème avec tes clonages? je ne comprends pas pourquoi tu clones un élément avant de le changer de place, ce qui t'obliges à faire un append + un remove;

[Solenhya]

J'avoue ne pas comment faire autrement pour faire un coupé collé d'un élément à un autre emplacement, je débute en JS. Pourquoi penses tu que cela viennes du clonage ? Ma fonction doneTask ne devrait elle pas être appeler à chaque fois que je clique sur une checkbox ?

[javatwister]

- vérifie aussi la valeur de thisId dans la console: je n'ai pas vu exactement à quoi correspondait e.target.parentElement.id mais c'est dangereux dans le contexte d'une checkbox dans un li;

[NoSmoking]

Bonjour et bienvenue sur DVP.

Peut-être te compliques tu la vie inutilement, dans un premier temps.

La méthode append fait le job à ta place, elle déplace d'un endroit à un autre l'élément passé en paramètre

Code :

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

1
2
3
parent1.append(element); // déplace element dans parent1 et non pas une copie
parent2.append(element); // déplace element dans parent2 et non pas une copie
// et ainsi de suite ...

Donc dans ton cas cela se résume à déplacer la <li> qui contient ton <input type="checkbox"> dans une liste <ul> ou une autre suivant que l'<input> est coché ou non.

Pour se faire il suffit, après création, d'affecter un événement, via addEventListener à ton <input type="checkbox"> et dans ce cas ta fonction reste des plus basique.

Code :

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

1
2
// affectation fonction sur le click
elCheck.addEventListener("click", handleClick);

La fonction handleClick basique ressemblant à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// transfert d'une liste à l'autre
function handleClick(e) {
  let parent;
  if (this.checked) {
    parent = document.getElementById("list-do")
  }
  else {
    parent = document.getElementById("list-todo");
  }
  parent.append(this.closest("li"))
}

Tu peux tester le résultat avec comme HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<fieldset>
  <legend>A faire</legend>
  <ul id="list-todo">
    <li><label><input type="checkbox">Tâche #1</label>
    <li><label><input type="checkbox">Tâche #2</label>
  </ul>
</fieldset>
<fieldset>
  <legend>Fair</legend>
  <ul id="list-do">
  </ul>
</fieldset>

et script

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function handleClick(e) {
  let parent;
  if (this.checked) {
    parent = document.getElementById("list-do")
  }
  else {
    parent = document.getElementById("list-todo");
  }
  parent.append(this.closest("li"))
}
const elements = document.querySelectorAll("[type='checkbox']");
elements.forEach((el) => {
  el.addEventListener("click", handleClick);
});

[Solenhya]

Il semble que cela venait effectivement du cloneNode, je me suis trop compliqué la tête avec ça. Merci à vous deux cela fonctionne comme je le voudrais maintenant.

Pour répondre à ta question javatwister, e.target.parentElement.id fait référence au parent de ma checkbox à savoir le li :



Pourquoi dis tu que cela est dangereux dans le contexte d'une checkbox ?

Merci encore pour vos réponses en tout cas cela m'aide bien.