Enregistrement choix de commande

Version imprimable

Bonjour,

Tout d'abord je m'excuse si ma question va vous sembler bête mais je débute sur JS et malgré la quantité de documentation que j'ai pu lire, je n'arrive pas à dbugger mon code toute seule et j'ai du coup besoin d'aide plus personnalisé.

En fait, je cherche à récupérer une variable en fonction des choix faitl'utilisateur via des bouttons pour enregistrer une commande. Je dois me tromper quelque part car rien de se passe dans la console mais je n'ai pas non plus de message d'erreur donc clairement quelque chose ne va pas mais je n'arrive pas à comprendre quoi.

Voici mon code:

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
<p id="Q1">Option végé?</p>
<button id="Byes">Oui</button>
<button id="Bno">Non</button>
 
<p id="Q2">Avec fromage?</p>
<button id="BCyes">Oui</button>
<button id="BCno">Non</button>
<br><br>
<button id="finalOrder"> Cliquez ici pour passer votre commande!</button>
 
<script> 
 
var order;
 
document.getElementById("Byes").addEventListener ("click",vegetarianOption);
document.getElementById("Bno").addEventListener ("click",vegetarianOption);
document.getElementById("BCyes").addEventListener ("click",fromageOption);
document.getElementById("BCno").addEventListener ("click",fromageOption);
document.getElementById("finalOrder").addEventListener ("click",finalOrder);
 
function vegetarianOption(){
    if (document.getElementById("Byes").clicked == true) {
    order = "Commande végétarienne";}
    else if (document.getElementById("Bno").clicked == true){
        order = "Commande avec viande";
    };
}
alert(order);
 
function fromageOption(){
    if (document.getElementById("BCyes").clicked == true) {
    order = order + ' ' + 'fromage';
    else if (document.getElementById("BCno").clicked == true){
        order = order;
    };
    alert(order);
 
function finalOrder(){
    if (finalOrder.clicked == true) {
        alert('Votre commande est en cours de préparation' + ' : ' + order )
    }
  }
 
</script>

Voila si vous pouviez m'aider ça serait top !

Merci d'avance,
Marion

:salut:

Votre code ne peut pas fonctionner, il y a trop d'erreurs.

Exemple correct :

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    let order = '';
 
    const
        elemByes = document.querySelector('#Byes'),
        elemBno = document.querySelector('#Bno'),
        elemBCyes = document.querySelector('#BCyes'),
        elemBCno = document.querySelector('#BCno'),
        elemFinalOrder = document.querySelector('#finalOrder');
 
    function vegetarianOption(ev) {
        if (ev.target === elemByes) {
            order = "Commande végétarienne";
        } else if (ev.target === elemBno) {
            order = "Commande avec viande";
        }
    }
 
    function fromageOption(ev) {
        if (ev.target === elemBCyes) {
            order += ' fromage';
        }
    }
 
    function commande(ev) {
        console.log('Votre commande est en cours de préparation' + ' : ' + order)
        order = '';
    }
 
    elemByes.addEventListener("click", vegetarianOption);
    elemBno.addEventListener("click", vegetarianOption);
    elemBCyes.addEventListener("click", fromageOption);
    elemBCno.addEventListener("click", fromageOption);
 
    elemFinalOrder.addEventListener("click", commande);
 
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

20/01/2019, 12h44
marionmc

Merci beaucoup pour votre réponse @danielhagnoul

Je vais étudier votre code et tenter de comprendre où je me suis trompée!!

Merci beaucoup :)
Marion