Build a Drum Machine failing on test number 7

Build a Drum Machine failing on test number 7
0
#1

Tell us what’s happening:
Hey all Thanks for the great projects, currently I am working on the Drum Machine project, However the test number 7 is not passing, getting the following error

  1. When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique). Error: Each time a drum pad is triggered, a unique string should be displayed in the element with the id “display”
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:147:331757

I have made sure all strings are unique

Your code so far
The code is in my codepen, here is the link https://codepen.io/renmasuo/pen/NBJWBg
Your browser information:
happens firefox, chrome, edge, don’t have access to safari.

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

#2

Unfortunately, you’ve chosen Vue, and the challenge explicitly states that Vue may not be supported. Anyways…

Since I don’t know Vue, I can’t debug what you have all that well. But when I look in the test code, I see this:

      it(`${reqNum}. When a .drum-pad is triggered, a string describing the
      associated audio clip is displayed as the inner text of the #display
      element (each string must be unique).`,
      function() {
        this.timeout(900);
        let displayText = [];
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            drumPads.forEach(pad => {
              __triggerClickEventCaller(pad);
              displayText.push(document.getElementById('display').innerText);
            });
            displayText = displayText.filter((str, i) =>
              displayText[0] === displayText[i]
            );
            if (displayText.length === 1) {
              resolve();
            } else {
              reject(new Error(
                'Each time a drum pad is triggered, a unique string should ' +
                'be displayed in the element with the id "display"'
              ));
            }
          }, 800);
        });
      });

It seems that there are several reasons that it could fail:

  1. The innerText of #display is not there
  2. The innerText of each *#display" sent by each .drum-pad is not unique

As near as I can tell, neither of these is a problem.

Another possibility is timeout errors.

Once I get the muck cleaned out of your HTML from your local dev files, I can see an error when I run the test:

index.html?editors=1010:1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

So maybe there is some timing issue there.

#3

–Update–
Thanks for the quick replay I manage to fix the issue, instead of using Vue state to update the #display element text content, I just called the element inside the event listener function and updated the #display innerTextContent there.

https://codepen.io/renmasuo/pen/NBJWBg, now works.

#4

Thanks to both of you, renmanimel and kevinSmith. I had the same issue with my drum-machine and this thread pointed me in the right direction.