1

I have a button with the attribute of aria-label="Sign In". I'm trying to select it with document.querySelector('button[aria-label=Sign In]') but that returns Uncaught DOMException: Document.querySelector: 'button[aria-label=Sign In]' is not a valid selector. Please help!

ajarrow
  • 414
  • 2
  • 10
  • 2
    Try with button[aria-label="Sign In"], you need to wrap it in –  Mar 23 '21 at 21:58
  • You were a Google search away from [your answer](https://stackoverflow.com/q/2694640/383904).... – Roko C. Buljan Mar 23 '21 at 22:02
  • @RokoC.Buljan I tried Googling it but it didn't bring anything up because I was searching for select attribute with spaces – ajarrow Mar 23 '21 at 22:04
  • @ajarrow Google is against you if you complicate the search query ;) I googled for: *"js select elements by attribute page:stackoverflow"* and bam. First result on top. – Roko C. Buljan Mar 23 '21 at 22:06

2 Answers2

3

When you have a space in an attribute selector you must enclose it in quotes otherwise it is treated as a descendant selector.

Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

let b = document.querySelector('button[aria-label="Sign In"]');
console.log(b)
<button aria-label="Sign In">Hi Sign In!</button>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector additional information on selectors here – Mark Schultheiss Mar 23 '21 at 22:07
  • Duplicate of https://stackoverflow.com/q/2694640/383904 of cumulative 1000+ votes – Roko C. Buljan Mar 23 '21 at 22:08
  • @RokoC.Buljan Similar yes but not specific to the cause and the descendent selector that resulted and why. – Mark Schultheiss Mar 23 '21 at 22:14
  • 1
    PS, button should always have a `type` attribute. Just for the sake of muscle memory. `type="button"` since by default it's `type="submit"` – Roko C. Buljan Mar 23 '21 at 22:16
  • Yep I see lots of input and button without a type, and in this case it might be a submit button based purely on the OP code so I left it without, but good call out there @RokoC.Buljan – Mark Schultheiss Mar 23 '21 at 22:22
  • It's... debatable whether it's actually treated as a descendant combinator in that context but it is a syntax error all the same. Namely, browsers that support case-sensitivity flags *don't* treat it as one, but will still throw because the token `In` isn't a valid case-sensitivity flag. As for browsers that don't, who knows? Maybe they treat it as a descendant combinator, maybe they treat it as whitespace and throw on the `In` because they were expecting a `]` instead. – BoltClock Mar 24 '21 at 01:46
1

use single or double quotes :

document.querySelector('button[aria-label="Sign In"]')
document.querySelector("button[aria-label='Sign In']")

OR escape the quotes if you same quotes for enclosing and representation :

document.querySelector("button[aria-label=\"Sign In\"]")
document.querySelector('button[aria-label=\'Sign In\']')

or use literal:

document.querySelector(`button[aria-label='Sign In']`)

You can use any of the approach

PDHide
  • 18,113
  • 2
  • 31
  • 46