Javascript Drumkit by wes bos

Javascript Drumkit by wes bos
0

Hi, guys, I am having problem with the audio elements when following this video to build the drumkit step by step. https://courses.wesbos.com/account/access/5cd066ca85f96c03c1e432cc/view/194130650
The code I have put in is exactly the same as in the video,
code in the video:
WeChat%20Screenshot_20190514190555 !
my code:
WeChat%20Screenshot_20190514190615 !
but my console shows null when logging rather than the audio elements,
my console:
WeChat%20Screenshot_20190514190800
the console in the video:
WeChat%20Screenshot_20190514190823 .
And when I copy and paste the same code onto JSFiddle, the console shows this,

,
Really confused what went wrong here, can someone help me? Thanks a lot!

Your addEventListener code seems to be missing semicolons. I don’t know how much of an issue that is.

Did you also copy the content of the style.css file to jsfiddle? The first error message suggests you haven’t. The rest of the jsfiddle error messages are just saying it can’t find the sound files for the drum noises.

I have added that. Not working yet. I didn’t know how to upload files to jsfiddle, so have run the script locally again and again, but the console still shows null?

Try this

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

Wes is using template literals, you have to use back-ticks for the interpolation to work. The course has a GitHub repo where you can check your code against the finished versions.

still not working on JSFiddle

the problem is the finished version does not contain this step, because Wes was just using this example to explain what he was doing. Quite strange getting stuck at a simple demonstration really. :joy:

also the back-ticks are not working either?

This is from the finished code.

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

If you press the key a, this code should log the element to the console.

<div data-key="65" class="key">
  <kbd>A</kbd>
  <span class="sound">clap</span>
</div>
function playSound(e) {
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  console.log(key);
}

window.addEventListener("keydown", playSound);

Also, please link to your JSFiddle if you need help.

const key = document.querySelector(div[data-key="${e.keyCode}"]);
console.log(key);
}