11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai importé les bibliothèques jQuery et Hammer dans mon code HTML.
Le but est de modifier le style appliqué à un texte (class=texte-bijagos) et à un lien (class=lien-bijagos) lorsque je fais un "tap" sur l'écran de mon mobile sur une image (id="icone-bijagos").

J'ai utilisé le code suivant :


					<div id="bijagos">
						<a href="http://mineralitude.com/index.php/2019/11/10/geologie-des-iles-bijagos/" class="lien-bijagos"><img src="img/icone-bijagos.png" id="icone-bijagos" alt="icone placée sur les Bijagos"/></a>
						<p class="texte-bijagos">La géologie des Bijagos</p>
					</div>
				</div>
			</div>

			<script type="text/javascript" src="js/hammer.js"></script>
    		<script type="text/javascript" src="js/jquery.js"></script>
   			<script>
   				$(document).ready(function(){
   					Hammer($("img#icone-bijagos")).on("tap", function(event){
   						$("p.texte-bijagos").css({'transition-property':'opacity', 'transition-duration':'0.2s', 'transition-timing-function':'linear', 'opacity':'1'});
   						$("a.lien-bijagos").css({'pointer-events':'none', 'cursor':'default'});
   					});
   				});
   			</script>


Bon déjà je ne suis pas experte en javascript, donc je ne suis pas sûre que ce code soit tout à fait correct.
D'autre part lorsque je vais dans mon inspecteur Google, les messages suivant s'affichent dans la console :

"Uncaught TypeError: a.addEventListener is not a function (jquery.js)
at hammer.js:6
at Array.forEach (<anonymous>)
at g (hammer.js:6)
at m (hammer.js:6)
at M.init (hammer.js:6)
at M.x (hammer.js:6)
at new M (hammer.js:6)
at y (hammer.js:6)
at new ia (hammer.js:6)
at ha (hammer.js:6)"

Alors que j'ai téléchargé jquery et hammer en ligne. Normalement ces bibliothèques sont correctes, je ne comprends pas.

Quelqu'un pourrait m'aider ?

Un grand merci d'avance
Modifié par moussolene (11 Apr 2020 - 15:30)
Hello,

Est-ce que jquery est appelé avant Hammer.js ? J'aurais inversé les 2 appels des scripts....jQuery en premier et les autres scripts qui dépendent de jQuery à la suite....


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>

Modifié par allan00958 (11 Apr 2020 - 15:40)
En effet j'ai l'impression que les scripts sont bien chargés maintenant.

Par contre le code que j'ai créé n'a pas l'air de fonctionner...