web-dev-qa-db-fra.com

Échec de l'exécution du sélecteur de requête sur le document, id n'est pas un sélecteur valide.

J'essaie de créer un moyen de modifier un groupe de commentaires et de les identifier à l'aide d'un identifiant que je peux générer. Les erreurs que j'ai, c'est qu'il y a:

SyntaxError: Impossible d'exécuter 'querySelector' sur 'Document': '# 1234' n'est pas un sélecteur valide. Cependant, je ne vois pas comment cela est possible puisque j'ai clairement id=1234 dans le <p>. 

De plus, il y a des problèmes où, lorsque je commente tout le reste et fais une alerte (id), cela ne fonctionne pas pour le second formulaire et l'erreur est la suivante:

TypeError: Impossible de lire la propriété 'classList' de null.

Le voici dans jfiddle: https://jsfiddle.net/wafqgq0L/2/

document.querySelector('.editable').addEventListener('click', function(event) {
 var index = event.target.id.indexOf('_');

 var id = event.target.id.substring(0,index);
	
	//actual data
	document.querySelector('#'+id).classList.add('hidden');
  
  //edit button
  document.querySelector("#"+id+"_edit").classList.add('hidden');
  
  //textarea
	document.querySelector("#"+id+"_editable").classList.remove('hidden');
  
  //save button
	document.querySelector("#"+id+"_save").classList.remove('hidden');

});
.hidden {
  display: none;
}
//all id will be like 12345_comment

<div class="editable">
<p id="1234">
  Some comment
</p>

<form action="form.php" method="post">
  <textarea id="1234_editable" class="hidden">Some comment</textarea>
  <a href="#" id="1234_edit">Edit</a>
  <a href="#" id="1234_save" class="hidden">Save</a>
</form>
</div>
<br><br>
<div class="editable">
<p id="123">
  Some comment
</p>

<form class="editable" action="form.php" method="post">
  <textarea id="123_editable" class="hidden">Some comment</textarea>
  <a href="#" id="123_edit">Edit</a>
  <a href="#" id="123_save" class="hidden">Save</a>
</form>
</div>

javascriptjqueryhtmlcssweb
5
user4634820

Vous trouverez peut-être que jQuery est plus facile et qu'il est multi-navigateur automatique (et plus rapide à taper!). Comme il est marqué sur votre question, voici la solution jQuery:

jsFiddle Demo

$('[id^=edit_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).addClass('hidden');
    $('#edit_'+id).addClass('hidden');

    $('#save_'+id).removeClass('hidden');  
    $('#editable_'+id).removeClass('hidden');  
});

$('[id^=save_]').click(function(){
    var id = this.id.split('_')[1];
    $('#'+id).removeClass('hidden');
    $('#edit_'+id).removeClass('hidden');

    $('#save_'+id).addClass('hidden');  
    $('#editable_'+id).addClass('hidden');  
});

Notez que j'ai basculé entre id_number et le préfixe idName_. Cela facilite beaucoup le ciblage de ces éléments à l'aide du sélecteur starts with: id^=

1
gibberish

Si vous utilisez HTML4, ids doit commencer par une lettre ( https://www.w3.org/TR/html4/types.html#type-id ) 

Si vous utilisez HTML5, vous pouvez utiliser des chiffres. 

Changez votre ids pour commencer par une lettre (comme dans id="p12345") ou utilisez HTML5 (C'est-à-dire utilisez <!DOCTYPE html> en haut de votre document).

9
ochi

document.querySelector("class or id") n'utilise pas de balises comme arguments, mais utilise class ou Id.

1
Atif Hussain

Vous pouvez utiliser des littéraux de modèle pour cela, car id doit figurer entre guillemets, sinon cela ne fonctionnera pas et assurez-vous d'utiliser HTML5 en haut de votre document. Avec cela, je n'ai plus eu de problèmes:

par exemple

    document.querySelector(`[data-id="${id}" ]`);

ou si, pour une raison quelconque, vous ne souhaitez pas utiliser de modèles de littéraux, ajoutez cette ligne de code:

    document.querySelector("[data-id=" + "\'" + id + "\'" + "]"); with escape character \' in double quotes

J'espère que cela t'aides.

0
Jovan Novakovic