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
Jochem
Jochem2y ago
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 JavaScript
sebin
sebin2y ago
hmmm 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?
Jochem
Jochem2y ago
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 h1
sebin
sebin2y ago
HHello @jochemm can I ask for a codepen if you dont mind I am really hahving a hhard time on js XDDD
Jochem
Jochem2y ago
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
sebin
sebin2y ago
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?
Jochem
Jochem2y ago
there's also a blur event that works the same as the focus one, but fires whenever the element loses focus
sebin
sebin2y ago
holy Thannk you so much I did it XDDDD
Want results from more Discord servers?
Add your server