JavaScript Function Efficiency [Help]

Question

I’m still fairly new to JavaScript and I was wondering if there’s a more efficient way of writing the functions I have.
The goal is to change the color of the label to the corresponding input while focused.
https://code.sololearn.com/Wkwu9BsWdqYw/?ref=app

Answer 1

Derek Stockton I ve made the optimization for your form , these are the things I did.
in order to separate logic from html
1.dropped IDs from label
2. dropped onblur and onfocus function calls from html
3. added a class "label" to those inputs that needed change on their Label color.
4. eventlisteners are now present in JavaScript .
Advantage:
it's much cleaner this way , coz now you just need to add "label" class to those inputs to add this color changing effect in your html, and no doing changes at 4 places.
Assumption:
all inputs with class = "label" only must have label tag
https://code.sololearn.com/WmE5aWE08dOA/?ref=app

Answer 2

Derek Stockton but focus-within won't be able to help in our context .
it ll track changes in the descendents and apply styles to the marked parent.
but our context is to track changes in a sibling and apply styles to a sibling .

Answer 3

You can use two functions like this:
function labelOn(label) {
document.getElementById(`label${label}`).style.color = 'rgb(26, 178, 255)';
}
function labelOff(label){
document.getElementById(`label${label}`).style.color = 'rgb(0,102,153)';
}
The ` (backticks) represent a format string.
To call the functions, replace labelXOn/labelXOff with labelOn("X")/labelOff("X").

Answer 4

Derek Stockton I would remember the offer if I need any help, Thank you 😊
it was a good learning experience for me.
coz at first I thought theres no need for js and we can do this with 6 lines of CSS , but turned out
input : blur{
/*change Label styles*/
}
is not possible with just CSS

Answer 5

@Morpheus - Awesome! Thanks for helping me with that. I have a lot to learn with JavaScript. Which I’m going to go do right meow. Anything I can help you with, please let me know!

Answer 6

@Morpheus I did come across a possible CSS solution but from what I understand the browser support isn’t very good. But it was...
form{
//code here
}
form:focus-within{
//code here
}
I didn’t play with it too long but may be something to investigate sometime.
Here’s a link to MDN about it.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Answer 7

@LunarCoffee. Thanks for taking the time to answer. I followed your code and it’s not working for me. I’m getting the following from the console. if I click the first input of Name...
Uncaught TypeError: cannot read property ‘style’ of null.
at labelOn (line 2)
at HTMLInputElement.onfocus ( where the html input element for name is)
Uncaught TypeError : cannot read property ‘style’ of null
at labelOff (line 6)
at HTMLInputElement.onblur ( where the html input element for name is)
I tried to get it to work, but I’m a noob lol.