Attendre click utilisateur

Bonjour à tous,

Voilà maintenant 5h que je bloque pour réaliser ce que je pense être une simple opération. Je débute en javascript et en code en général. ça fait un mois que je tente de concevoir une mini app web pour gérer des opérations de production pour ma boite.

Voici mon sujet de blocage :

J'aimerai à la suite d'un click sur un bouton "nouveau" , lancer une suite d'opérations à réaliser par l'utilisateur avec sa souris (des clics sur des éléments). A chaque clic tester sur l'objet cliqué est le bon ou non. Soit on renvoie la valeur de l'objet soit on attend un nouveau click. Si la valeur de l'objet est retourné je l'assigne à une propriété de ma classe puis on initie une nouvelle étape où on attend de nouveau un "click" sur un autre objet de la page.

J'ai ce petit bout de code qui me semble le plus proche de la solution encore que ... il ne se passe pas du tout ce que j'attends. Je tourne depuis des heures sur des forum et autre blog de développeurs.

Code:

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
btnNewItem.onclick = () => {
    const newItem = new TracaItem(articleAss)
    newItem.editItem()
}
 
class TracaItem {
    constructor(_article, _group = 0, _ordre = 0, _type = null, _instruction = null) {
        this.article = _article
        this.group = _group
        this.ordre = _ordre
        this.type = _type
        this.instruction = _instruction
    }
    add() {
        const xmlhttp = new XMLHttpRequest()
        xmlhttp.open("GET", `../script/php/addNewTraca.php?
        article=${this.article}
        &typeTraca=${this.type}&instructions=${this.instruction}&ordre=${this.ordre}`, true)
        xmlhttp.send()
    }
    p1(success, fail, event) {
        userInstruction.innerHTML = `Cliquer sur le groupe dans lequel vous voulez intégrer cette étape`
        if (event.target.parentNode.classList.value === "trGroup") {
            this.group = event.target.parentElement.firstElementChild.innerText
            console.log(this);
            document.removeEventListener('click', pa1)
            document.addEventListener('click', pa2)
 
            success()
        } else {
            fail()
        }
    }
    p2(success, fail, event) {
        userInstruction.innerHTML = `Cliquer sur l'item précédent la nouvelle étape`
        if (event.target.parentNode.classList.value === "trItem") {
            this.item = event.target.parentElement.firstElementChild.innerText
            console.log(this);
            document.removeEventListener('click', pa2)
            success()
        } else {
            fail()
        }
    }
    overallSuccess() {
        userInstruction.innerHTML = "Succès!"
    }
    overallFail() {
        userInstruction.innerHTML = "Echec."
    }
    editItem() {
        const pa1 = new Promise(this.p1)
        const pa2 = new Promise(this.p2)
        document.addEventListener('click', pa1)
        Promise.all([pa1, pa2]).then(this.overallSuccess, this.overallFail)
    }
 
}

Je vous remercie par avance pour votre aide