Learn JavaScript Episode #15: Textareas and Getting the Values of Inputs [w/ subs]



00:00:00 – Alright! So, that is arrays, and this is a pretty good use case if you want to
00:00:06 – basically just combine or group certain information together in one variable, in
00:00:10 – a list, that's when you use arrays. Now let's say we want to have kind of an
00:00:16 – object that that can have different values on different keys, so we can say
00:00:21 – the objects name is Nick, the age is whatever, and then the hobbies like that.
00:00:28 – And how we're going to do that is…let me actually drag this over to that tab
00:00:32 – right there, there we go. How we're going to do that is we're basically just going
00:00:40 – to, I think I forgot to do something actually, oh, I was just going to finish
00:00:47 – up…okay. Before we get into objects, I apologize about that, we're gonna get
00:00:52 – into interacting more with the web page first. So I'm going to jump up here, and I
00:00:56 – meant to do this a few video videos ago and then I got sidetracked by the arrays,
00:01:00 – so at least we know how to do arrays now. I'm gonna create an input with the class
00:01:06 – of “my-input” I'm going to close it and I'm going to skip down a line using the
00:01:17 – BR element. Save it, and refresh. There we go. So, what I want to happen here is I'm
00:01:26 – going to type in something into the input, and then I'm going to get the
00:01:32 – button, and when we click the button what we're going to do is we're going to
00:01:37 – change this text to basically whatever I type into the input. So, in this case,
00:01:42 – we're learning how to interact by grabbing a value and then setting the
00:01:47 – inner HTML of an item. So, when this button clicks we don't want to do any of
00:01:54 – this…well, let's let's leave the button clicked. What we're going to do is
00:01:59 – we're going to first get this element by the class, so it's my input, so document.
00:02:06 – getElementByClassname, and then the class name is “my-input”
00:02:17 – End that line right there. So this is going to get that element. Now what we
00:02:22 – can do is we can then get that value. So we need to store this in a variable, so
00:02:26 – let's create a variable called customText, and then we're going to get the
00:02:34 – value of that by…actually, let's do that right here. Or, no, okay. Just wait. What
00:02:41 – we're going to do is we're going to set this HTML for the ID of text. So,
00:02:50 – var results = document.getElementById and it's going to be “text”
00:03:00 – And then what we're going to do is we're going to say results.innerHTML, and
00:03:08 – this is a variable that we're setting, so go equals and then we're going to
00:03:13 – basically access whatever was typed into the input which it's stored in the
00:03:18 – variable custom text. So this is the input field there, so what we need to do
00:03:23 – is type current, or sorry custom, Text.value. and then semicolon. So, let's save
00:03:35 – this, and I'm going to refresh the application here, and I'm going to type Hello
00:03:39 – world, then hit go. It says undefined. So let's open up the console there, I'm
00:03:48 – pretty sure I missed something…customText is not defined. Alright, let's console.log
00:04:00 – customText and find out exactly what I am…oh, you know what it is? This is going
00:04:08 – to give us back a list of all elements with the class. So as you can see it's a
00:04:15 – list here, and this one right here is at index 0. So, we're getting all the
00:04:20 – elements and it's returning as an array. So what we need to do is we need to
00:04:24 – target the first index in that array. So I'm going to refresh here, and I'm going
00:04:31 – to type something here just gibberish, and when we hit go it's
00:04:35 – going to grab that value, and then it's going to set it
00:04:39 – right here. Now, we can go a step further. We can concatenate this to make it a
00:04:45 – little more involved. So what I'm going to do is I'm going to set the
00:04:50 – placeholder, so that people know what to type in, and it's going to be your name. And then what
00:04:58 – we're going to do here is we're going to set the HTML of results to “Hello, ” and
00:05:06 – then their name. So I'm going to save this, and then I'm going to refresh. So
00:05:16 – I'm going to say my name is Nick, and when we hit go it says Hello, Nick. So, that's
00:05:24 – how to grab a value from an input, and it also works on select elements, and
00:05:28 – checkboxes, and as far as textareas which we actually haven't talked about.
00:05:34 – So let's go ahead and talk about that right quick as well. I'm going to drop
00:05:38 – down here and create a textarea. This is basically like a large input field for
00:05:46 – text except it's multi-line and it follows some different rules. So as a
00:05:50 – textarea it's not like the input area in the sense that it self closes. So I'm
00:05:56 – going to add a placeholder here and type “Your message” and it closes like
00:06:03 – this. So if I save this and refresh it we see the textarea there. Now what happens
00:06:10 – if you put text between the textareas, between the opening and closing tag, is
00:06:15 – that content is prefilled, so you guys know. How you do that with an input field
00:06:23 – is you just set the value property. So, in this case, I'm going to set the value to
00:06:28 – “Nick” save it and refresh, and we get Nick prefilled into that input. And these are
00:06:37 – things that we're going to get more into after as well. I'm
00:06:41 – trying to show you guys basic usages before we start building projects, and
00:06:44 – then once we start doing that we're going to really expand on all the basic
00:06:48 – stuff that we learn here right now. So I'm going to give the textarea a class
00:06:54 – of my-textarea, and in the style sheet I'm going to style it the same as my
00:07:05 – input. So, .my-textarea. So, again, what this means basically is both of these
00:07:19 – elements are going to have these styles. I'm sure if I explained that before? Oh, yes, I
00:07:25 – did. Okay, cool. I must have explained that here, I think. Alright, so, let's go ahead
00:07:29 – and refresh, and there now we've got your name and your message, and this is resizable.
00:07:34 – There's a CSS property for this called resize, and we can choose either a
00:07:40 – direction or none. So I'm going to set resize to none. Save, refresh, now you see
00:07:48 – that this is not resizable. Alright, so, what we need to do is we need to jump
00:07:56 – back to our JavaScript here, and instead of saying hello what we're going to do
00:08:04 – is…actually, that's okay. Alright, so, let's go ahead and let's
00:08:13 – get the results of the textarea, so var textArea. It's going to be equal to
00:08:19 – document.getElementsByClassName, “my-textarea” And then what I'm going to
00:08:35 – do down here I'm going to start spacing these properly. I'm going to set a line
00:08:45 – break on to this, actually. So, just a
00:08:50 – regular line break. You can write HTML code within text, or within a string of
00:08:57 – JavaScript, by the way. It's definitely possible. So we're going to skip a line
00:09:01 – and then we're going to say results.innerHTML is going to be +=
00:09:10 – “Message: ” and then textArea, which is our variable, it's going to be a list that
00:09:18 – returns with all elements with a class my-textarea. So we're going to target
00:09:22 – number zero because we know that's what we need. One sec…alright. And then the
00:09:37 – value in here is just text. So I'm going to save it, we're going to refresh, I'm
00:09:42 – going to say Nick and then my message is I like programming, and then I'm going to
00:09:50 – hit go. And we've got undefined again. So, let's go ahead and console.log out
00:10:01 – the textArea, save it and refresh, and I'm going to type Nick, whoops, there we go. So,
00:10:14 – we do have this, it's stored there. We could get the HTML of it…it's getting the
00:10:33 – placeholder, it's getting the text length, text content, tag name, where is this? Oh,
00:10:41 – it is the value. Okay, sorry, did I say text? Okay, no. Okay, so, text is for
00:10:49 – elements like for a div or span. Inputs and textareas always use value because
00:10:58 – it's a value that you're setting.
00:11:05 – There we go. So as you can see we can get the value of textareas, inputs ,checkboxes,
00:11:11 – whatever you want to grab. That's how you can get that. Now, what I'm going
00:11:18 – to do is I'm going to say document.getElementById and I'm going to get
00:11:23 – the “go-button” I'll show you guys what I mean.
00:11:31 – Let's set it to b. So b.text, sorry b.innerText, it's going to say “Go.” So this
00:11:44 – is very similar to inner HTML, which I was discussing before, the only
00:11:49 – difference is that inner text is literally only going to print out text
00:11:54 – If there's any HTML code within an element, and I'm going to show you guys
00:11:57 – actually right now, and then we'll get on to other stuff. Let me go ahead and put a
00:12:02 – bunch of content in here. So I'm going to put a

, Hi, and then a
00:12:11 – comma and a space. Now here I'm going to create a div with a class of “unnecessary”
00:12:17 – and then inside that I'm going to put a and I'm going to say World; Now I'm
00:12:27 – going to save this and I'm going to refresh it. Now the divs cause some you know line
00:12:34 – breaks here obviously, but this is just for demonstration purposes. So, var t
00:12:39 – equals document.getElementById, and we're going to get it by “text” and now
00:12:49 – I'm going to print out t.innerText, and it's going to print out just the text,
00:12:54 – and then if I go t.innerHTML it's going to print out all of the code that
00:13:00 – is inside of that element. So, that's that's the main difference. I think with
00:13:05 – text I was thinking of a framework specifically that we work with the
00:13:11 – text variable inside of an object, so I apologize for that.
00:13:17 – With textareas and inputs it is always the value that is used to grab the actual
00:13:21 – value that's inside of that input. So, thank you guys for watching. In the next
00:13:27 – video I think we're going to start on objects, classes, and a lot of different
00:13:31 – things. Actually, I think we need to do more on functions. So we need to speak
00:13:35 – about a few different things regarding a function which we should do in the next
00:13:39 – video, and then you know some other awesome stuff after that.


Video Url:
http://youtu.be/5YPlMPzEWNQ

Comments

comments