All geek questions in one place

Failed to execute query selector on document, identifier is not a valid selector

I am trying to create a way to edit a group of comments and identify them by some identifier that I can generate. I have errors that are:

SyntaxError: Failed to execute 'querySelector' for 'Document': '# 1234' is not a valid selector. However, I do not understand how this is possible, since I explicitly have id=1234 in <p> .

In addition, there are problems when, when I comment on everything else and make a warning (id), this does not work for the second form, and the error is that:

Type error: it is impossible to read the 'classList' property with a null value.

Here it is in 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>
+8
source share
4 answers

You may find jQuery simpler and it will automatically cross-browser (and type faster!) Since it is tagged on your question, here is the jQuery solution:

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'); });

Note that I have included id_number and the idName_ prefix. This makes it much easier to target these elements with the starts with : id^= selector id^=

0
source

When using HTML4, the id must begin with a letter ( https://www.w3.org/TR/html4/types.html#type-id )

If you use HTML5, you can use numbers.

Either change your id so that it starts with a letter (as in id="p12345" ), or use HTML5 (that is, use <!DOCTYPE html> at the top of the document)

+11
source

You can use template string literals for this because the id must be in quotation marks, otherwise it will not work and be sure to use HTML5 at the top of the document. I had no more problems with this.

For instance:

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

Or, if for some reason you do not want to use template literals, add this line of code:

 document.querySelector("[data-id=" + "\'" + id + "\'" + "]");

With a masking \' in double quotes.

Hope this helps.

+2
source

document.querySelector("class or id") does not use tags as arguments, but uses a class or identifier.

+1
source

Source: https://habr.com/ru/post/1240577/

More articles:


All Articles