Non exécution du code Javascript

Version imprimable

Bonjour,

Je débute sur le Javascript. J'ai suivi une vidéo pour faire un menu de site web responsive, cependant mon code js ne semble pas s’exécuter.
Quand la fenêtre se réduit l'on doit pouvoir accéder au menu via un Burger, mais la commande click du js ne fonctionne pas.

test.php

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="test.css">
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
 
    </head>
    <body>
        <header role="header">
                <nav class="menu" role="navigation">
                        <div class="m-left">
                            <h1 class="logo">
                                BM
                            </h1>
                        </div>
 
 
                    <div class="m-right">
                        <a href="#presentation" class="m-link">Présentation</a>
                        <a href="#formations" class="m-link">Formations</a>
                        <a href="#competences" class="m-link">Compétences</a>
                        <a href="#projetsprofessionnels" class="m-link">Projets professionnels</a>
                        <a href="#projetspersonnels" class="m-link">Projets personnels</a>
                        <a href="#loisirs" class="m-link">Loisirs</a>
                        <a href="main_contact.php" class="m-link">Contact</a>
                    </div>
                    <div class="m-nav-toggle">
                        <span class="m-toggle-icon"></span>
                    </div>
                </nav>
 
        </header>
        <script src="test.js" charset="utf-8"></script>
    </body>
</html>

test.css

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/*header*/
 
*{
    margin: 0;
    padding: 0;
}
 
body{
    background: grey;
}
 
.menu{  
    background: red;
    width: 100%;
    height: 66px;
    line-height: 66px;
}
 
.logo{
    margin: 0;
    padding: 0;
    padding-left: 35px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Kalam', cursive; 
    font-weight: 500;
    font-size: 25px;
}
 
.m-left{
    float: left;
}
 
.m-right{
    float: right;
    padding-right: 35px;
}
 
.m-link{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0;
    margin: 0 5px;
    transition: all 0.3s ease-in-out; 
    border-bottom: 2px solid transparent;
}
 
.m-link:hover{
    padding-bottom: 3px;
    border-color: #FFF;
}
 
.m-nav-toggle{
    width: 40px;
    height: 70px;
 
    display: none;
    align-items: center;
    float: right;
    cursor: pointer;
}
 
span.m-toggle-icon, span.m-toggle-icon:before, span.m-toggle-icon:after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #FFF;
    position: relative;
}
 
span.m-toggle-icon:before{top : 12px;}
span.m-toggle-icon:after{top : -14px;}
 
.m-right.is-open{
    transform: translateX(0);
}
 
@media only screen and (max-width: 1150px){
    .m-right{
        position: absolute;
        top: 66px;
        right: 0;
        width: 300px;
        height: 100%; 
        background: red;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
    } 
    .m-link{
        display: block;
        text-align: center;
        padding: 0;
        margin: 0 25px;
        height: 100px;
    }
    .m-nav-toggle{
        display: flex;
    }
}

app.js

Code:

1
2
3
4
5
 
$('.m-nav-toggle').click(fonction(e){
    e.preventDefault();
    $('.m-right').addClass('is-open')
})

Pourriez-vous m'aider ? La vidéo que j'ai suivi est la suivante : https://www.youtube.com/watch?v=8rwI_rcDXC8&t=851s si ça peut aider.

Cordialement
Tekmate

Salut,

Ce n'est pas fonction mais function.

Code:

1
2
 
click(function(e){

Et utilise console.log() pour voir les détails ...

Code:

1
2
3
4
5
6
 
$('.m-nav-toggle').click(function(e){
    e.preventDefault();
    console.log("clic .....");//vérifie si tu vois cette ligne dans la console du navigateur !
    $('.m-right').addClass('is-open')
})

03/02/2020, 18h52
Tekmate

1 pièce(s) jointe(s)

Bonsoir,

Merci.
J'ai bien changé fonction par function et rajouté la commande de test, mais elle ne s'ouvre pas non plus.
Il me met 9 erreurs avec JSLint.

Cordialement
Tekmate

Probablement parce que tu n'as pas chargé jQuery avant d'appeler le script..., l'ordre des script est important en js.

Je viens de tester avec ton code (surtout la même version de jQuery) et voilà le lien directe.

J'ai seulement remplacé le script app.js par le code de clic sur le bouton :

Code:

1
2
3
4
5
6
 
           $('.m-nav-toggle').click(function(e){
            e.preventDefault();
            console.log("clic .....");//vérifie si tu vois cette ligne dans la console du navigateur !
            $('.m-right').toggleClass('is-open')
        });

Si ça ne fonctionne toujours pas, essaies de mettre le code du clic dans la fonction $(document).ready mais cette fois le tout dans le <head> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<head>
    .....
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script><!-- charger jQuery d'abord -->
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script>
        $(document).ready(function(){
              $('.m-nav-toggle').click(function(e){
                  e.preventDefault();
                  console.log("clic .....");//vérifie si tu vois cette ligne dans la console du navigateur !
                  $('.m-right').toggleClass('is-open');//toggleClass = supprime/ajoute la class .is-open à .m-right
             });
        });
    </script>

03/02/2020, 19h17
Tekmate

Cela fonctionne effectivement dans le html.

Merci beaucoup et bonne continuation
Cordialement
Tekmate