Keyboard.html:16 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'audio[data-key=65]' is not a valid selector

JavaScript
1

Attempting to make a querySelector that will select html “data-key” elecments as follows:

<! DOCTYPE html>
<html>
<head>
  <title>yo dog</title>
</head>
<body>
  <div class-key="65" class="key">

<audio data-key="65" src=""></audio>



</body>
<script type="text/javascript">
window.addEventListener('keydown', function(e){
  const audio = document.querySelector(`audio[data-key=${e.keyCode}]`);
  console.log(audio)
});


  </script>

  </html>
2

When using attribute selectors the value property must be a string:

so simply wrap your value into quotes should fix the issue:

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

Hope it helps :+1:

3

Well done. People like you keep civilization moving ahead.