Contenu variable perdu.

**thirt** · 07/09/2019, 22h11

Bonsoir à vous,

en fait, je souhaite utilise une variable qui s'appelle sideBar afin de savoir si la sideBar a déjà été montrée ou pas.

Le problème, c'est que cette variable semble être réinitialisée à 0 à chaque fois qu'un event est capturé. Dans mon cas, j'aimerais me servir de cette fonction pour faire un swipeRight et swipeLeft sur la version mobile.

Voici un exemple de mon code :

https://codepen.io/thirt/pen/eYOVdvY

Quand on swipe à droite, le message s'affiche bien. Par contre, quand on swipe à gauche, le message n'est pas affiché à cause du fait que la sideBar n'a pas gardé la valeur qui lui a été attribuée lors de l'événement swipeRight (normalement, cette variable devrait valoir 1 et elle vaut 0).

Pourquoi cette variable ne garde pas la valeur qu'on lui a assignée entre-temps ?

Merci d'avance pour votre aide.

Bonne soirée
Thierry

**ProgElecT** · 07/09/2019, 23h01

Salut

Ta condition if (!$sideBar) est non conforme
Pour preuve

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
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="fr"> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<script src="https://hammerjs.github.io/dist/hammer.js"></script>
		<style>
                        #site-content {
                        background: silver;
                        height: 300px;
                        text-align: center;
                        font: 30px/300px Helvetica, Arial, sans-serif;
                        }
                </style>
	</head>
	<body>
			<div id="site-content"></div>
		<script>
                        //'use strict'; // force la déclaration des variables
                        let swipeZone = document.getElementById('site-content');
                        let $sideBar = 0;
                        let mc = new Hammer(swipeZone);
 
                        mc.get('swipe').set({
                                direction: Hammer.DIRECTION_ALL,
                                threshold: 1, 
                                velocity:0.1
                        });
 
                        // listen to events...
                        mc
                        .on("swiperight", function(ev) {
                                        console.log("swiperight"); 
                                        if ($sideBar){return true;}
                                        swipeZone.textContent = ev.type + " gesture detected.";
                                        $sidebar = 1;
                                        console.log("swiperight => $sidebar= " + $sidebar); 
                                })
                        .on("swipeleft", function(ev) {
                                        console.log("swipeleft"); 
                                        if ($sideBar !==0){return true;}
                                        swipeZone.textContent = ev.type + " gesture detected.";
                                        $sidebar = 0;
                                        console.log("swipeleft => $sidebar= " + $sidebar); 
                                });
                </script>
	</body>
</html>

**psychadelic** · 07/09/2019, 23h17

Envoyé par thirt

Pourquoi cette variable ne garde pas la valeur qu'on lui a assignée entre-temps ?

parce que ton code ne change pas la valeur de $sideBar mais celle d'une autre variable (non déclarée et locale) $sidebarjavascript est case sensitive ==> le B doit être en MAJUSCULE

mais tant qu'a faire ta variable devrait être de type booléenne :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <title>Hammer</title>
  <style>
    #site-content {
      background: silver;
      height: 300px;
      text-align: center;
      font: 30px/300px Helvetica, Arial, sans-serif;
    }
  </style>
</head>
<body>
 
  <div id="site-content"></div>
 
  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script>
    'use strict'
    
    const swipeZone = document.getElementById('site-content')
        ,  mc       = new Hammer(swipeZone)
 
    var $backSideBar = false;
 
    mc.get('swipe').set(
      {
      direction: Hammer.DIRECTION_ALL,
      threshold: 1, 
      velocity:0.1
      });
 
    // listen to events...
    mc
    .on('swiperight', function(ev)
      {
      if ($backSideBar) return true
      swipeZone.textContent = `${ev.type} gesture detected.`
      $backSideBar          = true
      })
    .on('swipeleft', function(ev)
      {
      if (!$backSideBar) return true
      swipeZone.textContent = `${ev.type} gesture detected.`
      $backSideBar          = false
      });
  </script>
</body>
</html>

sinon, la fin du code peut s'écrire plus simplement:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
function SideBarMove(ev)
  {
  if ((ev.type==='swipeleft')!==$backSideBar) return true
  swipeZone.textContent = `${ev.type} gesture detected.`
  $backSideBar          = !$backSideBar
  }
 
mc
.on('swiperight', SideBarMove)
.on('swipeleft',  SideBarMove)

**thirt** · 08/09/2019, 09h58

Bonjour ProgElecT et Psychadelic,

tout d'abord, je tenais à vous remercier pour votre aide.

@Psychadelic : en effet, je n'avais pas fait attention au fait que la casse n'était pas respectée pour le nom de variable. Une erreur de débutant. -

Donc, grâce à vous, le problème est résolu.

Merci à vous.

Bonne journée
Thierry

Contenu variable perdu.

JavaScript

Discussions similaires

Partager

Partager