CODEWITHSUNDEEP
javascripthtmlcss
user4634820
user4634820

Reputation:

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

I'm trying to create a way to edit a bunch of comments and identify them by some id that I can generate. The errors I'm having is that there is:

SyntaxError: Failed to execute 'querySelector' on 'Document': '#1234' is not a valid selector. However, I don't see how this is possible since I clearly have id=1234 in the <p>.

Additionally, there are issues where when I comment everything else and do an alert(id), this does not work for the second form and the error is that:

TypeError: Cannot read property 'classList' of null.

Here is it 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>

Upvotes: 36

Views: 128689

Answers (4)

cssyphus
cssyphus

Reputation: 40058

You might find jQuery easier, and it's automatically cross-browser (and faster to type!) Since it's tagged on your question, here is the jQuery solution:

Edit: The tag jQuery was removed from the original question on May 25 '19 at 21:10 (3 years after question was asked and answered), by user John, with the inexplicable editor comment "remove spam tags".

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 switched around the id_number and the idName_ prefix. This makes it much easier to target those elements using the starts with selector: id^=

Upvotes: 4

Jovan Novakovic
Jovan Novakovic

Reputation: 304

You can use template string literals for this because id must be in quotes otherwise it won't work and be sure to use HTML5 at the top of your document. With this I didn't have any more issues.

For example:

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

Or if for any reason you don't want to use template literals add this line of code:

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

With escape character \' in double quotes.

Hope this helps.

Upvotes: 16

Atif Hussain
Atif Hussain

Reputation: 898

document.querySelector("class or id") is not using tags as arguments instead it uses class or Id.

Upvotes: 1

blurfus
blurfus

Reputation: 14031

If using HTML4 ids must start with a letter (https://www.w3.org/TR/html4/types.html#type-id)

If using HTML5 you can use numbers.

Either change your ids to start with a letter (as in id="p12345") or use HTML5 (i.e. use <!DOCTYPE html> at the top of your document)

Upvotes: 45

Related Questions