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.