Discussion :

[boteha]

Bonjour,


J'ai deux problèmes.

1)

Code :

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

var mobile = window.matchMedia ('(min-width: 768px)');

Je veux calculer la valeur au chargement de la page et au resize de la fenêtre.

2)

Selon la valeur dynamique de mobile je veux activer-désactiver un addEventListener ('click', function())

J'ai illustré la question avec un codepen.

Il fonctionne au chargement mais pas au resize.

Merci d'avance.

[SpaceFrog]

essaye en ajoutant un listener sur le resize ...

Code :

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

window.addEventListener('resize', maFonctionSurResize);

[SpaceFrog]

J'ai vu ta tentative sur le codepen ...

mobile est un objet dont il faut tester le matches ...

Code :

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

1
2
3
4
5
6
7
window.addEventListener ('resize', function()
{
 
  mobile = window.matchMedia ('(min-width: 768px)');
 console.log( mobile.matches? "Desktop":"Mobile"  ); 
}
);

pour la modif de couleur sur le clcik :

Code :

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
const test = document.getElementById ('test');
 
mobile = window.matchMedia ('(min-width: 768px)');
 
 
window.addEventListener ('resize', function()
{
mobile = window.matchMedia ('(min-width: 768px)');
 
}
);
 
 
if (mobile.matches)
{
test.addEventListener ('click', function()
{
if (test.style.color=='blue') test.style.color='red';
else test.style.color='blue';
});
}

[boteha]

Bonjour SpaceFrog,

Merci pour ton suivi.

je teste ce soir.

Je te tiens informé.

[NoSmoking]

Bonjour,

attention à ce genre de test :

Code :

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

1
2
3
4
if (test.style.color=='blue')
  test.style.color='red';
else
  test.style.color='blue';

il ne fonctionnera que si tu as écris :

Code html :

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

<element style="color:blue"></element>

... mais pas si tu passes par une feuille de style ou une déclaration entre balise <style></style>.

[boteha]

Bonjour SpaceFrog,

J'ai fait un rapide copier-coller de ton code dans mon codepen mais le résultat n'est pas au rendez-vous.

Bonjour NoSmoking,

J'ai fait pour le test la changement demandé.
Dans la vraie vie mon problème n'est pas de changer une couleur mais de bloquer une fonction qui en gros au click ouvre un pop-up..