# Evaluation javascript events

**URL:** <https://discourse.mozilla.org/t/evaluation-javascript-events/88343>\
**Category:** Learn\
**Created:** [November 10, 2021, 12:10am UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343 "2021-11-10T00:10:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Takis](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/takis/32/51892_2.png) [@Takis](https://discourse.mozilla.org/u/Takis)\
**Post date:** [November 10, 2021, 12:10am UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/1 "2021-11-10T00:10:39Z")

</div>

> **[Test your skills: Events - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Events)**
>
> The aim of this skill test is to assess whether you've understood our Introduction to events article.

See the Pen [JavaScrip: Eventos 1](https://codepen.io/ltakisl/pen/abyqgpg) by lTakisl ([@ltakisl](https://codepen.io/ltakisl)) on [CodePen](https://codepen.io).

See the Pen [JavaScrip: Eventos 2](https://codepen.io/ltakisl/pen/rNzvQKq) by lTakisl ([@ltakisl](https://codepen.io/ltakisl)) on [CodePen](https://codepen.io).

See the Pen [JavaScrip: Eventos 3](https://codepen.io/ltakisl/pen/QWMroqM) by lTakisl ([@ltakisl](https://codepen.io/ltakisl)) on [CodePen](https://codepen.io).

Well I have been able to solve exercise 1 and 2, exercise 2 I have used the event.key but it is not clear to me if that is the correct procedure or how I should have done it and what is used and in what cases, it has really cost me to get there to that. On the other hand, exercise 3 has been impossible for me, I have modified the code so many times that I no longer know how it was, or if it was on the right track.  
But the biggest problem of all that is that I don’t know how to get the color of the data-color of each of the buttons so that it gives me as a result in the line  
buttonBar.style.backgroundColor = ‘’;  
As long as what I did is well planned. And if not, how should it be? it really made my head ache XD.

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [November 10, 2021, 11:19am UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/2 "2021-11-10T11:19:28Z")

</div>

Hello @Takis

you doing great well done just a little note here:

1. in your first take you used return while not need at first cause you just want to set the text to another value and also `btn.textContent='Machine is on'` does not return value it assignment statement so it set whatever come from the right side of the = sign to the variable on the left side
2. for task 2 you used the event object so it would be better to make the function has it in it’s paramter list so it be like that `wasd(event)`
3. if you used the same way i mentioned in step 2 then you would see many option you can get from the event check this [https://developer.mozilla.org/en-US/docs/Web/API/Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)  
when you set the event on the parent then you do not know what the source that trigger that event did the user clicked on which button or even if he click on any empty area so you want to know the source of the event then you check it’s textcontent and based on that you set the color  
hope that give you some idea on how to solve it

by the way if you used an ide like webstorm or Visual Studio Code it would help you alot

and have a nice day 🙂

---

<div class="post-metadata">

**Author:** ![Takis](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/takis/32/51892_2.png) [@Takis](https://discourse.mozilla.org/u/Takis)\
**Post date:** [November 10, 2021, 9:23pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/3 "2021-11-10T21:23:28Z")

</div>

I really don’t understand or at least I can’t think of how to do exercise 3. I burned the light bulb hahaha, what would it be like?

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [November 10, 2021, 9:47pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/4 "2021-11-10T21:47:09Z")

</div>

no we need those light 😂  
let us take it step by step

```auto
    let color = event.target.textContent; now what is the object that trigger it is it button or the user click on empty space or what
so we ue event.target then we want to know what it's textContent is it red yellow or what so we use event.target.textContent

    if(color==="Red"){ now if it red
buttonBar.style.backgroundColor = "red" ; we set the background as you did        
    }   
}

```

just complete the if else for the other cases and you done

hope that help and keep the bulb lighting 😂

---

<div class="post-metadata">

**Author:** ![albaraa\_1949](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/albaraa_1949/32/76736_2.png) [@albaraa\_1949](https://discourse.mozilla.org/u/albaraa_1949)\
**Post date:** [November 10, 2021, 10:38pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/5 "2021-11-10T22:38:23Z")

</div>

I think @justsomeone gave a very appropriate answer, but I was there 🙃 and was able to think of a solution thanks to this link:

> **[Using data attributes - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes)**
>
> HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-\* attributes allow us to store extra information on standard, semantic HTML elements without other...

You can also have a look here to get an idea : [https://codepen.io/someone\_49/pen/ExmOaJx](https://codepen.io/someone_49/pen/ExmOaJx)

---

<div class="post-metadata">

**Author:** ![Takis](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/takis/32/51892_2.png) [@Takis](https://discourse.mozilla.org/u/Takis)\
**Post date:** [November 10, 2021, 10:56pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/6 "2021-11-10T22:56:46Z")

</div>

You just answered 2 questions I was asking myself, I already keep it =)

Thank you! to both!

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [November 10, 2021, 10:57pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/7 "2021-11-10T22:57:51Z")

</div>

you very welcome 🙂

---

<div class="post-metadata">

**Author:** ![Takis](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/takis/32/51892_2.png) [@Takis](https://discourse.mozilla.org/u/Takis)\
**Post date:** [November 10, 2021, 11:09pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/8 "2021-11-10T23:09:41Z")

</div>

and for example if I simply put  
buttonBar.style.backgroundColor = color;

without putting it in an if?

I mean to put it simply like this:

function bgColorButtonBar () {

let color = event.target.textContent;

buttonBar.style.backgroundColor = color;

}

buttonBar.addEventListener (‘click’, bgColorButtonBar);

it is valid?

I think it would be the last question of this xD

---

<div class="post-metadata">

**Author:** ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)\
**Post date:** [November 10, 2021, 11:29pm UTC](https://discourse.mozilla.org/t/evaluation-javascript-events/88343/9 "2021-11-10T23:29:42Z")

</div>

sure and it even better than my way  
do you want to make it better  
check this

```auto
function bgColorButtonBar() {
buttonBar.style.backgroundColor = event.target.textContent ;
   
  }

```

no need for if at all 😉