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
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.
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:
The innerText of #display is not there
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().
–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.