Failed to Execute Query Selector on Document, Id Is Not a Valid Selector

console.log(  document.querySelector('[id="foo$bar"] .item'));

<div id="foo$bar">  <div class="item">    item  </div></div>

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

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 'querySelector' on 'Document': 'button[data-id="purple-button" disabled]' is not a valid selector

You should use brackets to separate the attributes.

document.querySelector('button[data-id="purple-button"][disabled]')

Per this Stack Overflow answer

SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '#0.resizer' is not a valid selector

It is very hard to tell what could be the issue but as i can assume currently on the basis of your selector. The generated markup should look like:

<div id="0" class="resizer">...</div>

But if it is like:

<div id="0.resizer">...</div>

Then you should escape the . as it has special meaning in css. It denotes class selector. So you should escape it like:

 document.querySelectorAll("#" + id + "\.resizer")
 //document.querySelectorAll(`#${id}\.resizer`) // <---es6 template variable

Why is there an error saying Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector

The event listener requires the href in the navigation link to be a valid selector for the element to scroll to. So change

<a class="nav__link nav__link--btn btn--show-modal" href="#">Open account</a>

to

<a class="nav__link nav__link--btn btn--show-modal" href="#someid">Open account</a>

and replace someid with the ID of the element that contains the account opening form that you want to scroll to.

Why is there an error that occurs randomly saying Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '' is not a valid selector

document.querySelector is not working with "=" symbol inside the id

So what is wrong with the = symbol in this

document.querySelector("#canvas-=")

As mentioned in the querySelector docs:

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):

Working Demo:

const elem = document.querySelector("#canvas-\\=");console.log(elem.innerHTML);

<h1>This is a Heading</h1><p id="canvas-=">This is a paragraph.</p>