11486 sujets

JavaScript, DOM et API Web HTML5

Condition if

Bonjour à tous,

Comme je débute avec Javascript je ne suis pas encore très familière avec la fonction if.

Voilà ce que je recherche :

- j'ai créé une div "bijagos" qui contient une image "icone-bijagos", un texte "texte-bijagos" et un lien associé à l'image "lien-bijagos".

- je précise que mon problème concerne le cas où je suis sur mobile, avec du tactile.
Lorsque je fais un premier "tap" sur mon écran, directement sur l'image "icone-bijagos", je veux que le texte apparaisse, (son opacity passe donc de 0 à 1), et que le lien soit désactivé (pointer-events = none).

- ensuite, au deuxième tap, je veux que lien s'active.

J'ai décidé de faire appel à la fonction if de la manière suivante :

SI l'opacity de mon "texte-bijagos" est à 0, dans ce cas, au tap que je ferai, son opacity passera à 1 et le lien associé sera inactivé.

SI l'opacity de mon "texte-bijagos" est à 1, dans ce cas, au tap que je ferai, le lien sera actif.

Voici le code que j'ai écris. 


<script>
   var iconeBijagos = document.getElementById("icone-bijagos");
   		if (document.getElementById("texte-bijagos").style.opacity = "0"){
   			Hammer(iconeBijagos).on("tap", function(event){
   				document.getElementById("lien-bijagos").style.pointerEvents = "none";
   				document.getElementById("texte-bijagos").style.opacity = "1";
   			});
   		}
   		else if (document.getElementById("texte-bijagos").style.opacity = "1"){
   			Hammer(iconeBijagos).on("tap", function(event){
   				document.getElementById("lien-bijagos").style.pointerEvents = "auto";
   			});
   		}
</script>


ça marche bien pour le premier if, mais pas pour le second.

Quelqu'un pourrait m'aider ? Smiley biggrin
Modifié par moussolene (12 Apr 2020 - 15:12)
Bonjour moussolene,
Revérifies TEST conditions si je lie ce que tu as écrit :
if (document.getElementById("texte-bijagos").style.opacity = "0"){ ...
j'assigne à l'opacité à 0,
toi tu veux (enfin je penses) :
si opacité égale à 0
Une fois corrigé cela va, je penses faire apparaitre un autre problème que tu pourra corrigé
en lisant ce codepen
Bonjour aliasdmc,

Quand je fais mon premier "tap", je vois que mon HTML se modifie, il passe de :


<div id="bijagos">
						<a href="www..." id="lien-bijagos"><img src="www..." id="icone-bijagos"  style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></a>
						<p id="texte-bijagos">La géologie des Bijagos</p>
					</div>


à 


<div id="bijagos">
						<a href="www..." id="lien-bijagos" style="pointer-events: none; cursor: default;"><img src="www..." id="icone-bijagos" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></a>
						<p id="texte-bijagos" style="opacity: 1; transition-property: opacity; transition-duration: 0.2s; transition-timing-function: linear;">La géologie des Bijagos</p>
					</div>


Pour moi la condition document.getElementById("texte-bijagos").style.opacity = "1" est bien présente au moment du deuxième tap.
Et j'ai essayé de remplacer mes = par des ===, mais dans ce cas le lien ne se désactive pas au moment du premier tap.
Modifié par moussolene (12 Apr 2020 - 18:14)
Bonjour aliasdmc,

J'y suis allée une première fois mais j'ai eu du mal à tout comprendre, là j'ai l'impression que l'opencode a été un peu modifié et est plus clair. Je vais lire tout ça en détail et au besoin je reviens vers toi, merci beaucoup Smiley smile
moussolene a écrit :
Bonjour aliasdmc,

J'y suis allée une première fois mais j'ai eu du mal à tout comprendre, là j'ai l'impression que l'opencode a été un peu modifié et est plus clair. Je vais lire tout ça en détail et au besoin je reviens vers toi, merci beaucoup Smiley smile


En fait je ne vois pas en quoi cela m'aide pour mon histoire de lien qui est sensé s'activer la deuxième fois que je fais le tap...

En tout cas j'ai bien renseigné la condition "opacity:0" dans mon HTML de départ.
Ce qui fait qu'en principe, la première condition "if" de mon code devrait être respectée.

La question est : comment se fait-il que quand je fasse un tap, et que la second condition else if "opacity:1" est respectée cette fois-ci, mon lien ne devienne pas actif à ce moment-là?
Bonjour moussolene,

Je crois voir d'où cela vient, en fait ton script est declenché "au chargement de la page"
donc on passe dans la 2eme condition. Mais si l'opacité change le script n'est pas re-exécuté
donc on ne passe jamais dans le 1ere condition
Donc ce qu'il faudrait faire c'est un truc comme cela : 
Hammer(iconeBijagos).on("tap", function(event){
  console.log(event);
  oEleText = document.getElementById("texte-bijagos")
  if (oEleText.style.opacity == "0"){
  }
  else if (oEleText.style.opacity == "1"){
  }
});

Je teste de mon coté ...
Je n'ai pas réussit avec hammer.js , mais je t'ai fait un truc pour l'exemple :
https://codepen.io/Zonecss/pen/MWawPrE
Modifié par aliasdmc (13 Apr 2020 - 18:17)
Sujet clos
Aller à