1

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.

Eystein Thanisch
  • 57
  • 1
  • 8
  • 3
    Use a regular string concatenation ... `"a[choicePOS=" + corrID +"]"` – Teemu May 09 '18 at 12:04
  • 1
    Possible duplicate of [How to interpolate variables in strings in JavaScript, without concatenation?](https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation) –  May 09 '18 at 12:05
  • https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings ... https://stackoverflow.com/questions/7790811/how-do-i-put-variables-inside-javascript-strings-node-js/7790828 ... https://stackoverflow.com/questions/4435149/how-can-i-insert-a-variable-in-a-string-in-js-coming-from-a-ruby-example –  May 09 '18 at 12:06
  • 1
    `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? –  May 09 '18 at 12:21
  • Hello. Thanks, @Teemu . That works :-) And thanks @ Crazy Train. The duplicates make sense now I understand the selector. – Eystein Thanisch May 10 '18 at 08:19

1 Answers1

2

Use template literals to evaluate that

var corr = document.querySelectorAll(`a[choicePOS=${corrID}]`);
fortunee
  • 3,852
  • 2
  • 17
  • 29
  • I believe you meant `document.querySelectorAll(\`a[${choicePOS}=${corrID}]\`)` – skyboyer May 09 '18 at 12:10
  • You should've kept @lonesomeday's edit. Now it's broken again. –  May 09 '18 at 12:15
  • 1
    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"`. –  May 09 '18 at 12:19
  • Nope, still broken. Now you're back to @skyboyer's broken version. How does this keep getting upvotes? –  May 09 '18 at 12:23
  • well the general solution is this. If only the template string will get fixed. – Carlo May 09 '18 at 12:25
  • I'm just confused man, I don't know who's requesting for edit so I can approve it. Bottom line is ES6 template literals should fix the damn thing come on @CrazyTrain – fortunee May 09 '18 at 12:27
  • Knowing what the solution is isn't enough. You need to know how to use it too. Come on @FortuneEkeruo –  May 09 '18 at 12:30
  • It's alright @CrazyTrain just request an edit so I can approve it. We're all here to collaborate and help each other. – fortunee May 09 '18 at 12:33
  • I *am* helping you, but if you're going to answer incorrectly, don't complain when your errors are pointed out. It's now correct, so there's nothing more to edit. –  May 09 '18 at 12:36
  • But really I wasn't complaining bro. I'm sorry if that was how I sounded. Lol @CrazyTrain – fortunee May 09 '18 at 12:39
  • Thanks @FortuneEkeruo . And thanks everyone for the additional input. I didn't know about template literals. They look very useful. Unfortunately, I can't use this solution because I am working on Oxygen and it keeps rejecting the backtick as an illegal character. Once I've found a way of circumventing this, I'll try your solution out and get back to you... – Eystein Thanisch May 10 '18 at 08:24
  • 1
    @EysteinThanisch Then try normal string concatenation, like this `document.querySelectorAll('a[choicePOS=' + corrID + ']' );` – fortunee May 10 '18 at 11:29