Build a Drum Machine validation stuck

JavaScript
1

Within each .drum-pad, there should be an HTML5 <audio> element which has a src attribute pointing to an audio clip, a class name of "clip", and an id corresponding to the inner text of its parent .drum-pad (e.g. id="Q", id="W", id="E" etc.).

I just don’t see a mistake:
https://codepen.io/ikiK_Cro/pen/wvgNpwo

Elements are rendered as:
<div class="drum-pad" data-key="Z" id="Kick-n'-Hat">Z <audio controls="" style="display: none;" class="clip" id="Z"><source src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" type="audio/mpeg"></audio></div>

I really hope is not cose of the style="display: none;" …
Can someone please advise…

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0.

Challenge: Build a Drum Machine

Link to the challenge:

2

First, you’re missing src attribute in <audio>. You have added <source>, but test expect explicitly src attribute.
Second, tests are expecting for the <audio> element to be clicked, not the JS Audio object to be constructed and played.

The tests unfortunately are not testing the functionality, but implementation, which actually is considered a bad practice.

4

I can not add src to audio itself.

v-bind:src="drum.src"

I get Uncaught DOMException: String contains an invalid character from Vue and it fails to build DOM.

Seems to me it needs audio to have < source > in it. Witch is a valid HTML markup anyway.

5

Works for me: https://codepen.io/jenovs/pen/OJWdzoj?editors=0010

It doesn’t matter. As I mentioned, tests are testing for specific attributes, not the functionality.

6

Thanks for your help, I got it working.

But I have to say, even for example last requirement is :
## 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).

So I changed Vue apps data object to reflect that element, it was printing out values but it didnt pass the test, only when i fetched DOM element itself and set innerText it passed.
document.querySelector("#display").innerText=r.audio

This just seems wrong to me. I mean whole point of using this framers is to manipulate data. Not DOM elements.

Anyways, thanks for the help. I appreciate it.

7

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