Front End Development Libraries Projects - Build a Drum Machine HTML button does not recognize JS

JavaScript
1

Tell us what’s happening:
My Q button says the function playSound does not exist, although the function works when I call it inside the js itself.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Front End Development Libraries Projects - Build a Drum Machine

Link to the challenge:

2

Go to the settings for JS and include jquery under Add External Scripts/Pens

Then delete the import statement

[ don’t forget to add the second argument to playSound(‘Q’) ]

3

The import statement seems to create a module. But the way it is implemented seems a little odd. If you have an import at the top, even if it is commented out the global doesn’t work because now it is a module and they have different scoping rules.

This doesn’t work as it makes it a module.

// import something from 'test'

function playSound(key, desc) {
  console.log(key);
}

So you have to put the function back on the global object.

// import something from 'test'

function playSound(key, desc) {
  console.log(key);
}

window.playSound = playSound;

Edit: just to be clear, for an inline function in the HTML to work it has to be available globally.

4

This worked! Thank you!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.