Evaluation javascript events

MDN Learn
#1

See the Pen JavaScrip: Eventos 1 by lTakisl (@ltakisl) on CodePen.

See the Pen JavaScrip: Eventos 2 by lTakisl (@ltakisl) on CodePen.

See the Pen JavaScrip: Eventos 3 by lTakisl (@ltakisl) on CodePen.

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.

#2

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
    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 :slight_smile:

#3

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?

#4

no we need those light :joy:
let us take it step by step

    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 :joy:

1 Like
#5

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

You can also have a look here to get an idea : https://codepen.io/someone_49/pen/ExmOaJx

2 Likes
#6

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

Thank you! to both!

2 Likes
#7

you very welcome :slight_smile:

#8

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

#9

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

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

no need for if at all :wink: