How to use querySelectorAll with a variable?

Question

I have two HTML elements that are alternatives of each other and I am trying to write a JS function that removes one if the other is present (they originated as words within <sic> and <corr> beneath <choice> in a TEI document). In my transformation, they are both assigned a code (not an @id: @id is randomly generated and has to remain so for other purposes) with a unique prefix:

<a id="abc" choicePOS="sic0">Element1</a>
<a id="xyz" choicePOS="corr0">Element2</a>

In a JS function that 'belongs' to Element1, I want to select Element2 so as to remove it. This is what I have tried (el is element1):

var choicePOS = el.getAttribute("choicePOS").slice(3); // produces 0
var corrID = "corr" + choicePOS; // produces corr0
var corr = document.querySelectorAll("a[choicePOS=corrID]");

This fails, presumably because the corrID variable in the last line is in quote marks and is being taken as a string. I have read various tutorials on CSS selectors and can't find any guidance on how to use them with a variable attribute value. Is this possible? If so, how? If not, any alternatives?

EDIT: A number of other questions relating how to concatenate strings with variables in JS have been suggested as duplicates of this one. To clarify, I am asking specifically about querySelectorAll, as I cannot find any examples this being used with variables. If the answer is that its selector is to be treated as any other JS string (i.e. variables can be concatenated in), then that is perfectly satisfactory.

Use a regular string concatenation ... "a[choicePOS=" + corrID +"]" — Teemu
– Teemu, Commented May 9, 2018 at 12:04
Possible duplicate of How to interpolate variables in strings in JavaScript, without concatenation? — user2437417
– user2437417, Commented May 9, 2018 at 12:05
stackoverflow.com/questions/19105009/… ... stackoverflow.com/questions/7790811/… ... stackoverflow.com/questions/4435149/… — user2437417
– user2437417, Commented May 9, 2018 at 12:06
querySelectorAll is irrelevant. The selector is just any other JS string. There's nothing at all special about it. That's why I gave all those duplicates. Did you actually try them? — user2437417
– user2437417, Commented May 9, 2018 at 12:21
Hello. Thanks, @Teemu . That works :-) And thanks @ Crazy Train. The duplicates make sense now I understand the selector. — Eystein Thanisch
– Eystein Thanisch, Commented May 10, 2018 at 8:19

fortunee · Accepted Answer · 2018-05-09 12:27:49Z

2

Use template literals to evaluate that

var corr = document.querySelectorAll(`a[choicePOS=${corrID}]`);

edited May 9, 2018 at 12:27

answered May 9, 2018 at 12:07

fortunee

4,3622 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

skyboyer Over a year ago

I believe you meant document.querySelectorAll(`a[${choicePOS}=${corrID}]`)

user2437417 Over a year ago

You should've kept @lonesomeday's edit. Now it's broken again.

user2437417 Over a year ago

His edit was `a[choicePOS=${corrID}]` because corrID is the variable to be added to the string. The data-attribute is named choisePOS. If you use @skyboyer's version, the selector will be attempting to select "0=corr0".

user2437417 Over a year ago

Nope, still broken. Now you're back to @skyboyer's broken version. How does this keep getting upvotes?

fortunee Over a year ago

@EysteinThanisch Then try normal string concatenation, like this document.querySelectorAll('a[choicePOS=' + corrID + ']' );

|

Collectives™ on Stack Overflow

How to use querySelectorAll with a variable?

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related