Assessment wanted for Test your skills: Events 1, 2 & 3

[Risa]

Could someone kindly check my work on Test your skills: Events?

I have a question about Events 3. Please see below.

My work:
Events 1

Events 2

Events 3
Why is event.target working even though I haven’t define (event) (I left the parentheses after 'click', blank)?

Test page

Test your skills: Events - Learn web development | MDN

[mikoMK (Michael Koch)]

Hi again, @Risa!

• Task 1: Correct. Maybe consider using the class name in the condition (and also changing it accordingly) instead of the button text. This would feel more robust. Texts tend to change over time.
• Task 2: Correct. Nice to show two solutions. I think this is a good example where switch is a good tool to use. Be aware that using event.key only works for keyboard layout that have “WASD” on the same buttons than the American Keyboard. French people would need to twist their hands. A possible solution is to use event.code (position on American keyboard; actual letter doesn’t matter).
• Task 3: Small misunderstanding. The whole buttonBar should change its color and not the pressed button itself.

@Risa

Why is event.target working even though I haven’t define (event) (I left the parentheses after 'click', blank)?

Interesting observation. It seems that there’s always a variable called event populated no matter what we put into the parentheses. A lot of people just use e in the parentheses, but even then you can still console.log(event) inside (and additionally use e).
I didn’t know that and for the sake of clearness I wouldn’t recommend it either.

Michael

[Risa]

Thank you again, @mikoMK!

I revised all 3 tasks, taking your advices into account Could you kindly check them?

@mikoMK

Task 1: Correct. Maybe consider using the class name in the condition (and also changing it accordingly) instead of the button text. This would feel more robust. Texts tend to change over time.

@mikoMK

Be aware that using event.key only works for keyboard layout that have “WASD” on the same buttons than the American Keyboard. French people would need to twist their hands. A possible solution is to use event.code ( position on American keyboard; actual letter doesn’t matter).

@mikoMK

Task 3: Small misunderstanding. The whole buttonBar should change its color and not the pressed button itself.

[mikoMK (Michael Koch)]

Great improvements, @Risa!

For Task 3 there’s even a simpler version. Since we already use buttonBar to refer to the element we can replace event.currentTarget with buttonBar. (But your solution is absolutely fine )

[Risa]

Thanks @mikoMK!

Oh, yes absolutely! I don’t know why I didn’t think of just using buttonBar
Thank you so much!

Risa

[Vladlen_Vronsky]

Thank you @Risa and @mikoMK !!!

I’m having trouble getting my head around Events and this thread has been a big help