Non exécution du code Javascript

**Tekmate** · 03/02/2020, 17h38

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 HTML :

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
<!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 CSS :

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
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 :

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

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 :

si ça peut aider.

Cordialement
Tekmate

**Toufik83** · 03/02/2020, 18h12

Salut,

Ce n'est pas fonction mais function.

Code :

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

1
2
 
click(function(e){

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

Code :

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

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')
})

**Tekmate** · 03/02/2020, 18h52

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

**Toufik83** · 03/02/2020, 19h12

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 :

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

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 html :

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

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>

**Tekmate** · 03/02/2020, 19h17

Cela fonctionne effectivement dans le html.

Merci beaucoup et bonne continuation
Cordialement
Tekmate

Non exécution du code Javascript

jQuery

Discussions similaires

Partager

Partager