Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 14 and Solution: val() function
This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 14 and Solution: val() function" Lesson
[00:00:00]
>> [MUSIC].
[00:00:03]
>> Justin Meyer: Now we're going to implement the val function which works just the same. The difference is that val operates on input elements. So let me show the exercise, and then I'll explain the value property of input elements. So we're gonna add a val method that gets and sets the value of an HTML element.
[00:00:25] So if I have an input like this, I can read its value property like this, and I can also update its value property.
>> Justin Meyer: So for those people who were kind of new, I'm just gonna go over what an input element looks like, and that it has a value property.
[00:00:48] So if I just create a input here and I'll give it an id, age or something, and I'll give it a value of 100.
>> Justin Meyer: If I open up my breeds.
>> Justin Meyer: You can see I have that 100 there. If I get my age element
>> Justin Meyer: You can see has an input in there, and you can see I could do that value on it.
[00:01:32] It's gonna give me 100. And if I set that to 200, it updates the element on the left here. So, basically you're gonna implement the exacts just like you HTML, but instead of the HTML function we did, it's going to change the value property. Other than that it's gona look the exact same.
[00:01:57] So this should take not very much time. So if you could put like six minutes on the board. Then we'll break for lunch right after this I think. The answer is pretty straight forward for this one, because all we're doing is instead of using innerHTML, we're just using val.
[00:02:15] So the easiest thing to do here is just copy the insides of this function, paste it, and then instead of setting innerHTML to new HTML, we're gonna set value to new value, and then return the value. All right, exact same thing a lot of jQuery code does this getter setter stuff, text will be a little bit different.
[00:02:42] But, attr and css, half of width, half of some of these other functions follow this exact same pattern, to make jQuery do what it does.