Question

185

How can I use document.querySelector to select this class name with a space in it?

rated 0 times [ 190] [ 5] / answers: 1 / hits: 48704 / 9 Years ago, sun, april 26, 2015, 12:00:00

<a href=javascript:void(0) class=PrmryBtnMed

 id = VERYLONGTEXT



onclick=$(this).parents('form').submit(); return false;><span>Dispatch to this address</span></a>

I have been using

var inPage = document.documentElement.innerHTML.indexOf('text to search') > 0,

    el = document.querySelector(.PrmryBtnMed);



if (inPage && el) el.click();

But now, the class name has changed: there’s a space and some new text in the class name:

<a href=javascript:void(0) class=PrmryBtnMed ApricotWheat

 id = VERYLONGTEXT

onclick=ApricotWheat(this); return false;><span>Dispatch to this address</span></a>

How can I change el = document.querySelector(.PrmryBtnMed);
to find the right class?

I tried using el = document.querySelector(.PrmryBtnMed.ApricotWheat); but that didn’t work.

Next, I tried to add a space (and escape using a backslash): el = document.querySelector(.PrmryBtnMed ApricotWheat); but that didn’t work either.

So, I wondered if I could use %20 for the space.. but no luck.

I’d be very grateful for some help! What am I doing wrong?

Answers

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

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

View All

answered 9 Years ago kendellc · Accepted Answer

Classes can't have spaces, what you have there is an element with two separate classes on it. To select an element with two classes, you use a compound class selector:

 document.querySelector(.PrmryBtnMed.ApricotWheat);

That selects the first element in the document that has both the PrmryBtnMed class and the ApricotWheat class. Note that it doesn't matter what order those classes appear in in the class attribute, and it doesn't matter whether there are also other classes present. It would match any of these, for instance:

<div class=PrmryBtnMed ApricotWheat>...</div>

or

<div class=ApricotWheat PrmryBtnMed>...</div>

or

<div class=PrmryBtnMed foo baz ApricotWheat>...</div>

etc.

Also note that the quotes you're using around HTML attributes are sporatically invalid; the quotes around attributes must be normal, boring, single (') or double (), they can't be fancy quotes.

Live example with quotes fixed and using the selector above:

var el = document.querySelector(.PrmryBtnMed.ApricotWheat);

if (el) {

  el.click();

}



function ApricotWheat(element) {

  alert(element.innerHTML);

}

<a href=javascript:void(0) class=PrmryBtnMed ApricotWheat id=VERYLONGTEXT onclick=ApricotWheat(this); return false;><span>Dispatch to this address</span></a>