Uncaught SyntaxError: Impossible d’exécuter ‘querySelector’ sur ‘Document’

'' 

J’ai utilisé le code ci-dessus pour générer le bouton à l’intérieur de jQuery chaque fonction. Le bouton créé dynamicment et lorsque j’ai cliqué sur le bouton, il devrait afficher la progression sur le bouton. J’utilise ce Ladda Button Loader .

  btnDeactivateKeyInChildPremiumCustomerClick : function(event){ var id = event.currentTarget.id; var btnProgress = Ladda.create(document.querySelector('#'+id)); //btnProgress.start(); or //btnProgress.stop(); } 

Et puis j’ai passé le bouton le gestionnaire d’événements attraper le processus d’événement de la fonction ci-dessus. À l’ intérieur de cette fonction, il va créer un object btnProgress . Après cela, je peux appeler les fonctions start () ou stop (). J’ai travaillé avec succès dans le cas d’un seul bouton sans créer le bouton de manière dynamic dans chacune d’elles. Mais dans chaque cas, il affiche des erreurs lors de l’exécution de var btnProgress = Ladda.create (document.querySelector (‘#’ + id));

Erreur

 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector. 

Vous êtes autorisé à utiliser des identifiants commençant par un chiffre dans vos documents HTML5:

La valeur doit être unique parmi tous les ID de la sous-arborescence de base de l’élément et doit contenir au moins un caractère. La valeur ne doit contenir aucun espace.

Il n’y a pas d’autres ressortingctions sur la forme que peut prendre un identifiant; en particulier, les identifiants peuvent être composés uniquement de chiffres, commencer par un chiffre, commencer par un trait de soulignement, ne comporter que de la ponctuation, etc.

Mais la méthode querySelector utilise des sélecteurs CSS3 pour interroger le DOM et CSS3 ne prend pas en charge les sélecteurs d’ID commençant par un chiffre:

En CSS, les identifiants (y compris les noms d’élément, les classes et les identifiants dans les sélecteurs) ne peuvent contenir que les caractères [a-zA-Z0-9] et ISO 10646 caractères U + 00A0 et supérieurs, plus le tiret (-) et le trait de soulignement ( _); ils ne peuvent pas commencer par un chiffre, deux traits d’union ou un trait d’union suivi d’un chiffre.

Utilisez une valeur telle que b22 pour l’atsortingbut ID et votre code fonctionnera.

Puisque vous voulez sélectionner un élément par ID, vous pouvez également utiliser la méthode .getElementById :

 document.getElementById('22') 

Bien que cela soit valide en HTML, vous ne pouvez pas utiliser un ID commençant par un entier dans les sélecteurs CSS .

Comme indiqué, vous pouvez utiliser getElementById place, mais vous pouvez également obtenir le même résultat avec un querySelector :

 document.querySelector("[id='22']")