Assessment wanted for Events Skills tests 1-3

MDN Learn
#1

I feel like I may have cheesed my way through these assessments, but I’m just looking for your honest opinion and any feedback on ways I could improve these, or do them differently.
Thanks in advance!
Events: Task 1
Events: Task 2
Events: Task 3

1 Like
#2

Hey @meestajones

I have checked and recreated your code by adding some modularity, Please check

Event 1
Event 2
Event 3

#3

I appreciate the response, but I haven’t learned at all what the “this” object fully means yet, so although I understand creating one function to perform the task, right now prototypes, arrow functions, this… all confuse me.
I’m trying to take it slow and steady, but again thanks for the response.

1 Like
#4

Hi @meestajones!

Looking at your code for the “events 1” test, you’ve got the code exactly right for the first button. For the second button however, it isn’t working with single clicks because you are triggering the on state with a single click event, and then the off state with a ‘dblclick’ event, which is a different event entirely ‘dblclick’ means “two clicks in quick succession”, not “another click some time after the previous click”.

It would have worked if you’d have just used the same code structure again as you’d used for the first button. But no worries — you got the code right, so well done!

@Varade19 has shown us a useful technique here — using this in functions to refer to “the current object the code is being run against”. See my this explanation, which you unfortunately won’t have got to yet at this point in the course! But it is really useful.

So in their version of “events 1”, when changeText() is run by clicking the first button, this is equal to a reference to the first button. When changeText() is run by clicking the second button however, this is equal to a reference to the second button. The value of this changes relative to the context it is being run in.

As another tip, you could also select all the buttons on the page using

let btns = document.querySelectorAll("button");

And then run through and add the event listener to all of them using something like this:

btns.forEach(function(btn) {
  btn.addEventListener('click', changeText);
})

This would then make all the buttons on the page work, no matter how many of them there are on the page.

#5

@meestajones your answer for “events 2” looks great; well done!

#6

@meestajones for “events 3”, your code works, but there is a much quicker way to do this; our official answer is

let buttonBar = document.querySelector('.button-bar');

function setColor(e) {
  buttonBar.style.backgroundColor = e.target.getAttribute('data-color');
}

buttonBar.addEventListener('click', setColor);

e.target is really useful in situations like this — it refers to “the element the event was fired on”. So despite setting the event listener on the buttorBar, the event bubbles to each button inside the buttonBar, and e.target.getAttribute('data-color') grabs the color contained inside the data-color attribute of each button when it is clicked on, setting the buttonBar's background color equal to that color.

2 Likes
#7

ahh that makes a lot more sense, I knew I kind of cheesed it through that assessment but am starting to understand the attributes of ‘e’ more clearly the more time I spend on it.
It gets a little overwhelming because I have been learning alot about stuff that is way over my head at this point. I have to remind myself to slow down and take it easy.
Thanks again @Varade19 and @chrisdavidmills

1 Like