Question

183

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

rated 0 times [ 184] [ 1] / answers: 1 / hits: 92677 / 9 Years ago, wed, january 13, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyterryp

Add To Favorites

Follow

Total Points: 290

Total Questions: 92

Total Answers: 95

Location: Montenegro

Member since Sun, May 7, 2023

1 Year ago

harleyterryp questions

1 error Filters are deprecated how to solve this error in vue.js 3

Fri, Jun 11, 21, 00:00, 3 Years ago

1 How to Insert an image inside an input field in react js?

Fri, May 28, 21, 00:00, 3 Years ago

1 ElectronJS: Uncaught TypeError: Cannot read property BrowserWindow / getCurrentWindow of undefined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 Access React context API from _app in NextJS

Fri, Oct 2, 20, 00:00, 4 Years ago

1 jsPDF with AutoTable not working - Possible JavaScript issue

Sun, Jun 28, 20, 00:00, 4 Years ago

View All

answered 9 Years ago morganm · Accepted Answer

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^=

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

Answers

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".

harleyterryp

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".