Input Field Function on JS
Hey guys can I ask how can I implement a function on js. This is my brain thinks when click on a input field the h1 title should be change to somewhat any color to make the title h1 focus.
I have a h1 title which is Question 1 that has color black and I have also a Input where they should put an answer.
8 Replies
There's an
focus event that fires when a form element gets focus, so you'd want an event listener for that that then changes the color of the h1 either by adding a class or setting an inline style using JavaScripthmmm so basically I will get the input and then put event lister thhat will change the color style of h1?
sample function:
const input
const h1
if input is focus => change inlinestyle of the h1 right?
it might be a good idea to read up on event handlers on MDN https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers or https://javascript.info
you want to get the element, then call
addEventListener('focus', my_cool_event_handler) on it, where my_cool_event_handler is either an arrow function or a reference to another function you defined elsewhere
the event handler function then runs any time your event fires, and would change the color of the h1HHello @jochemm can I ask for a codepen if you dont mind I am really hahving a hhard time on js XDDD
you'll have to rewrite the querySelectors to make sense for your situation, and adding classes instead of inline styles might be a better solution.
https://codepen.io/jochemm/pen/eYLbEvK
but honestly, you should probably try following some basic tutorials about events and changing styling and such
Omg Thankyou so much! now I understand I thought I need also to make a function for the h1 and call it on a function of focus
I will definitely do that<3333
also after click away from the input how will the h1 remove its color?
there's also a
blur event that works the same as the focus one, but fires whenever the element loses focusholy Thannk you so much I did it XDDDD