JavaScript Document.querySelector()

Question

I am a beginner with JavaScript and I was following one of the 30 days javascript30.com tasks and saw for the first time the document.querySelector().

It is clear to me reading through this MDN - Query Selector what it does, however i cannot figure out how it is used in the code, and especially:

What is the dollar sign meaning here? (I am aware it is not specific meanings in this language, it confuses me)
Generally, I am not understanding what is happening between the selector brackets (), this:
```
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
```

can anyone help me?

Thanks!

here is the code for the building of a drum kit:

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing'); //add class defined in css
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);

<div class="keys">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>
  <div data-key="83" class="key">
    <kbd>S</kbd>
    <span class="sound">hihat</span>
  </div>
  <div data-key="68" class="key">
    <kbd>D</kbd>
    <span class="sound">kick</span>
  </div>
  <div data-key="70" class="key">
    <kbd>F</kbd>
    <span class="sound">openhat</span>
  </div>
  <div data-key="71" class="key">
    <kbd>G</kbd>
    <span class="sound">boom</span>
  </div>
  <div data-key="72" class="key">
    <kbd>H</kbd>
    <span class="sound">ride</span>
  </div>
  <div data-key="74" class="key">
    <kbd>J</kbd>
    <span class="sound">snare</span>
  </div>
  <div data-key="75" class="key">
    <kbd>K</kbd>
    <span class="sound">tom</span>
  </div>
  <div data-key="76" class="key">
    <kbd>L</kbd>
    <span class="sound">tink</span>
  </div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

The selector `audio[data-key="${e.keyCode}"]` is searching the tags audio with the attribute data-key equal to a key code. The keyCode is the code of the pressed key of your keyboard — R3tep, Feb 21 '17 at 11:04
@Quentin You marked as duplicate but not reply this : *Generally, I am not understanding what is happening between the selector brackets ()* — R3tep, Feb 21 '17 at 11:07
@R3tep — This is why, when you ask a question on Stackoverflow, you should ask **a** question and not multiple questions. (And honestly, you should do some basic research. The [selectors specification](https://duckduckgo.com/?q=CSS+selectors+level+3+&t=hb&ia=web) for CSS makes it quite easy to find out what those mean). — Quentin, Feb 21 '17 at 11:12

score 3 · Answer 1 · answered Feb 21 '17 at 10:58

It is a Template Literal introduced in ECMA 2015.

Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes. Template literals can contain place holders. These are indicated by the Dollar sign and curly braces (${expression}). The expressions in the place holders and the text between them get passed to a function. The default function just concatenates the parts into a single string. If there is an expression preceding the template literal (tag here), the template string is called "tagged template literal". In that case, the tag expression (usually a function) gets called with the processed template literal, which you can then manipulate before outputting. To escape a back-tick in a template literal, put a backslash \ before the back-tick.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

thanks, much clearer now – Maria di Cesare Feb 21 '17 at 11:25 — Maria di Cesare, Feb 21 '17 at 11:25

JavaScript Document.querySelector()

1 Answers1