Beat Mixer Passing Tests, not Working

I’m so frustrated. This passes all tests, but doesn’t work when I open it in a browser. None of the Synth grid or Drum grid shows up. I made a previous post about it, but it locked me out.
Here is what I have:

//Drum Arrays
const drums = {
    'kicks' : kicks = Array(16).fill(false),
    'snares' : snares = Array(16).fill(false),
    'hiHats' : hiHats = Array(16).fill(false),
    'rideCymbals' : rideCymbals = Array(16).fill(false),

const toggleDrum = (drumName, i) => {
    if (drums.hasOwnProperty(drumName) && i < drums[drumName].length && i >= 0) {
        drums[drumName][i] = !drums[drumName][i]

const clear = drumName => {
    if (drums.hasOwnProperty(drumName)) { 

const invert = drumName => {
    if (drums.hasOwnProperty(drumName)) {
        drums[drumName].map((x, i, arr) => arr[i] = !x)

When I console.log any of the drum arrays (kicks, snares, etc) it has an output of an array with 16 values of false, so why won’t that show up in the browser?

If I do this…

const drums = {
    'kicks' : Array(16).fill(false),
    'snares' : Array(16).fill(false),
    'hiHats' : Array(16).fill(false),
    'rideCymbals' : Array(16).fill(false),

I get a ‘before all hook’ error because I believe it’s looking for variables (kicks, snares, etc.), rather than the string version.

Project Link

Hello, @shh003.

I haven’t done this project, so it took some work to get to where I could try to help you out, but I found why you are having your current issue:

If you look in play-logic.js you’ll see another object named drums. This object is part of the pre-written code. I changed the name in the code you provided to drumKit (all-occurences), and then refreshed the browser. Suddenly both grids were visible! You can use any name you like, but since both .js files are linked to the index.html, you cannot use drum in both files.

1 Like

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