Please ignore the horrible sounds, I asked my brother for samples and this is what I’m stuck with. Anyways.
I know why it’s not passing but I have no idea how to fix it. My machine works. It’s not pretty, it hasn’t been cleaned up at all yet, but it fits all the conditions. However, it won’t pass.
You can see from the image why it’s failing. On the very left you’ll see I’m console logging the
event, and then
event.toElement.innerHTML. You can see the outputs on the very right.
Upon pushing a button, it console logs the event, which you can’t see, but does have innerHTML included, and then below it logs the innerHTML itself, as you can see on the top right. It’s there, it has to be, it’s written in the page.
However, when the test “pushes” the button on the page, no innerHTML is ever generated so the test can’t see it. Both failure conditions, so 2 out of 8, are caused by this happening.
I have no idea how to fix this or write a workaround. Anyone have any tips?
hey @windowpuncher,
If you change the id’s to the buttons to the same text that you want to show on the display you could set the function up like this…
function keyChoice(event) {
const key = event.target.innerText
const id = event.target.id
updateDisplay(id);
playSound(key);
}
No need for the switch and your tests should also pass 
Unfortunately this doesn’t work. This method makes it so pressing the button plays a sound and updates the display, but any key pressed afterwards only plays the last played sound.
This is because between a keypress and a button click, event.target is completely different, so it renders keyboard controls useless.
Get the key property on the keyboard event, use it to get the audio element, and then get the parent element id, pass that as the text content to updateDisplay.
const key = event.key.toUpperCase();
const parentId = document.getElementById(key).parentElement.id;
updateDisplay(parentId);
@windowpuncher
oh yeah i forgot about the key presses
document.addEventListener("keydown", (event) => {
const keys = 'qweasdzxc'
const key = event.key
if(keys.includes(key)) {
playSound(event.key.toUpperCase());
}
});
That is really smart, I rewrote it to working combining biscuitmanz’s code with my own modified switch statement, but yours is a much cleaner solution than what I had.
That’s also a pretty good option, adding it to the listener.
Yes well, the code I posted wasn’t really meant as final code just an example, because it does not account for any error handling. Which is the same issue you have with the playSound function. If you press a key that can not be used in getElementById to get a valid element it will throw an error when you try to use the properties on it (just check the element is truthy before using it).
