Javascript qui ne s'applique pas

Sujet résolu

17 janvier 2017 à 18:06:00

Bonsoir tous le monde,

J'ai tenté de reproduire un code trouvé sur le net ici: (Le but est d'activer ma checkbox lorsque je clique sur une area)
http://jsfiddle.net/daTEg/16/

Le seul souci c'est quand j'utilise exactement le même javascript, cela ne fonctionne pas... Quelqu'un pourrait me donner un petit coup de pouce ?

Voici mon HTML (Je débute dans le JS et je pense que je m'y prend mal pour appeler la librairie Jquery)

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Une découverte</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="fichier.js"></script>
</head>

<body>
North<input name="north" type="checkbox" />

South<input name="south" type="checkbox" />

<img src="http://www.richmond.ca/__shared/assets/Richmond_Park_Map9320.jpg" width="450" height="348" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="137,17,285,120" href="#" alt="north">
  <area shape="rect" coords="152,165,292,327" href="#" alt="south">
</map>
</body>
</html>

et mon JS:

$('area').click(function(){
    var name = $(this).attr('alt');
    var $checkbox = $('[name=' + name + ']');
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

Anonyme

17 janvier 2017 à 18:11:07

ça fonctionne chez moi

Lucky13

17 janvier 2017 à 18:32:47

Idem...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Tydresic

17 janvier 2017 à 18:39:39

Bonjour,

Je n'ai pas fait le test chez moi.

Par contre, à tout hasard, essaye de déplacer ta balise script au bas du body...
Aussi, tu utilises quel navigateur ? (question posée aussi pour nos amis ayant déjà répondu)

Ce qui se comprend aisément s'énonce clairement / DocPHP / DocHTML/CSS/JS

sebdevil

17 janvier 2017 à 18:45:45

J'ai testé sur Chrome et Firefox et...
o_O Bizarrement mettre le script qui appel "fichier.js" à la fin du body a fonctionné !

Merci beaucoup ! (Par contre ce qui est étonnant c'est que ça fonctionne chez Lucky et Tyrion ^^)

-
Edité par sebdevil 17 janvier 2017 à 18:47:02

Lucky13

17 janvier 2017 à 18:59:39

Oui c'est normal, il faut que le document html soit chargé pour que le fichier.js puisse cibler les éléments de ta page...

-
Edité par Lucky13 17 janvier 2017 à 19:00:48

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

sebdevil

17 janvier 2017 à 20:02:42

D'accord ! Merci à tous pour le tuyau en tout cas !

Le problème est résolu =)

-
Edité par sebdevil 17 janvier 2017 à 20:07:31

Anonyme

17 janvier 2017 à 22:09:12

si les choses étaient faites correctement t'aurais pas de soucis

un $(function () {}) auraient résolu ton souci

ninjavascript

18 janvier 2017 à 2:15:02

TyrionGraphiste a écrit:

si les choses étaient faites correctement t'aurais pas de soucis

un $(function () {}) auraient résolu ton souci

Si les choses étaient aussi expliquées correctement plutôt que de poster une solution générique sans plus de détails sous prétexte que c'est une bonne pratique

La réponse de Lucky13 est exacte. Lorsque tu fais ceci en jQuery : $('area'), ce dernier va parser le DOM (l'arbre HTML) pour aller chercher une collection de balises correspondants à ce sélecteur.

Si cette instruction est exécutée trop tôt (par exemple juste après l'ouverture du <body> quand le reste du HTML n'est pas encore chargé, ce que tu avais fais), jQuery ne trouvera aucun élément correspondant à ce sélecteur, et ne fera rien.
C'est une des raisons pour laquelle généralement on plaçait les balises <script> en fin de page juste avant de fermer le </body>.

Aujourd'hui, tu peux aussi contourner ce genre de problème en utilisant la méthode .ready() de jQuery sur ton document :

<body>
  
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script>
    $(document).ready( function() {
      var pValue = $('p').text();
      alert('Le paragraphe contient le texte : ' + pValue);
    } );
  </script>
  
  <p>Ce paragraphe sera interprêté par le navigateur après la balise script au dessus.</p>

</body>

Ce code affichera bien dans une alerte le contenu du paragraphe, même si ce dernier est placé après la balises <script>, grâce à $(document).ready(...) qui indique au navigateur d'attendre que le DOM soit entièrement chargé avant d'exécuter le JS dans la function().

Et sinon, cela fonctionnait très bien sur jsfiddle car l'outil doit gérer le fait que le HTML en haut soit chargé avant d'exécuter le JS en bas (ce qui était la base de ton problème sur ton ordi local ).

-
Edité par ninjavascript 18 janvier 2017 à 2:21:30

Anonyme

19 janvier 2017 à 19:32:39

jmpp a écrit:

TyrionGraphiste a écrit:

si les choses étaient faites correctement t'aurais pas de soucis

un $(function () {}) auraient résolu ton souci

Si les choses étaient aussi expliquées correctement plutôt que de poster une solution générique sans plus de détails sous prétexte que c'est une bonne pratique

La réponse de Lucky13 est exacte. Lorsque tu fais ceci en jQuery : $('area'), ce dernier va parser le DOM (l'arbre HTML) pour aller chercher une collection de balises correspondants à ce sélecteur.

Si cette instruction est exécutée trop tôt (par exemple juste après l'ouverture du <body> quand le reste du HTML n'est pas encore chargé, ce que tu avais fais), jQuery ne trouvera aucun élément correspondant à ce sélecteur, et ne fera rien.
C'est une des raisons pour laquelle généralement on plaçait les balises <script> en fin de page juste avant de fermer le </body>.

Aujourd'hui, tu peux aussi contourner ce genre de problème en utilisant la méthode .ready() de jQuery sur ton document :
<body>
  
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script>
    $(document).ready( function() {
      var pValue = $('p').text();
      alert('Le paragraphe contient le texte : ' + pValue);
    } );
  </script>
  
  <p>Ce paragraphe sera interprêté par le navigateur après la balise script au dessus.</p>

</body>
Ce code affichera bien dans une alerte le contenu du paragraphe, même si ce dernier est placé après la balises <script>, grâce à $(document).ready(...) qui indique au navigateur d'attendre que le DOM soit entièrement chargé avant d'exécuter le JS dans la function().

Et sinon, cela fonctionnait très bien sur jsfiddle car l'outil doit gérer le fait que le HTML en haut soit chargé avant d'exécuter le JS en bas (ce qui était la base de ton problème sur ton ordi local ).

-
Edité par jmpp hier à 2:21

Ben il se trouve que ma réponse répond et résout exactement son problème, le pourquoi du comment il est sur le net, si encore t'avais repris quelqu'un qui répond à côté de la plaque ça passe encore mais c'est pas le cas, dommage pour toi

ah oui et pour info $(function() {}); = à ton document.ready
des bisous

-
Edité par Anonyme 19 janvier 2017 à 19:37:06

sebdevil

21 janvier 2017 à 20:00:13

Oui je n'ai vu que plus tard qu'il y avait un "loadtype" de paramétrable sur fiddle.

Merci pour votre aide et vos conseils =). (Je vais faire un petit test avec la méthode .ready())