Use JavaScript to Get Value from a Textbox and Display on the Page

hey this is ralph and in this video i want to be able to write a little baby script so that i can get the value the input from a text box so previous video we just really quickly made a text box which is just using a label and of course the good old fashion where's my editor there it is input type text i it does have an id i played around with placeholder just to see how that worked and of course we have the max length attribute in there but what i want um students in intro to javascript to be able to do is obviously easily make a text box input control but also to be able to get the value from the user and then do something with it and what we're going to do is going to be pretty simple we're going to get the value of this text box that the user provides and we're just going to display it in a paragraph off to the side in anticipation of that we do need to be able to invoke our function call a function trigger the function and we're going to do that with a button click so after my text box here i'm going to do input type equals let's do button that seems pretty good and i'm going to put a value that just says click me that's all it takes and that's going to give me a button right on there now this button has already been styled i did a couple videos back otherwise i'm just styling anything that's an input type button so that it has those colors and that hover effect and stuff like that you'll notice the labeling for the button is created with the value attribute and in javascript that would be the value property for this particular element because i want this button to trigger or invoke a function let me go and give it an id i'm just going to call it button one just to be kind of generic and remember the order of the attributes in an element doesn't matter so as long as they're all in that tag okay so that's going to be my button but i also need a place for my paragraph to go i'm going to do paragraph class equals output and then id equals output one and there's my paragraph and again i've already styled it so that my paragraph box is going to show up off to the right that's just css stuff there so now when somebody types something inside of the text box and hits the button i want that text to show up over there in the paragraph so that's going to be pretty easy to make things neat and organized and simple i'm going to put my scripts right down here in the lower portion of the body of the page and i will start off by declaring a few variables let's see my first variable i'm going to use the const keyword my first variable is going to be for yeah maybe to just i'll go in order here the text box itself so i'm just going to put in text 1 is going to be my variable for text box 1 in case we do more and that's going to be equal to document.getelement by and then my id for that is what tbuser oops i need to put some i'll use single quotes for that yeah that's all i'm going to do there i'm also going to do a constant variable for my button and i'll call that vtn1 again document.getelementbyid and then my button id is btn1 so on my document object i'm looking for an element that has that id and i'm just finding it by its id pretty common efficient way to go and um let's see let's do another one here for my output constant i'll say out one document.getelementbyid and this is output one cool so i've got those constants in there now i'm actually going to create a function the name of my function is simply going to be fun one i'm going to do an empty set of parentheses parentheses because this function is not going to have any parameters no need to do that and try that out later on where we can pass arguments to a function but um yeah so function one and it's not going to do a lot of exciting stuff by the way it's going to simply go to my output paragraph which is out one that's my output paragraph dot inner html so my object is my paragraph and inner html is a property of that paragraph inner html means it's going to look at the contents in between the opening and closing tags in this case the paragraph tag and i want that inner html to be equal to my textbox1.value so value is a property of my text box object and there's a few other values too but that's one that we would use quite a bit in order to get that value by the way if i actually had a value attribute show up in my text box which is pretty rare but if i put a value attribute in there i'd have some text display in that text box that's different than the placeholder by the way placeholder is temporary and disappears once the user starts to enter a value but i don't want to use a value in the actual input element i want the user the web visitor to just to supply the value i think that's pretty good so now we just need to put in an event handler um now my button already has a variable representing it so i can do btn1 dot add event listener when the user clicks this button i want to call my fun one function there it is that's all i need to do there so basically when the user clicks my button it's going to call my fun one function and there it is my fun one function is simply going to take the value of the text box and put that into the inner html of my output paragraph well let's give it a shot let's see what's going on here so here it is now i do have my console open i'm using my edge browser let me just refresh just in case i don't think i need to because i'm auto saving live server all that jazz uh actually let's click see if anything happens nothing happens let's type in my name in the text box and then click and there we go and that input is displaying right over there in our output so input from the user and then we invoke a function which grabs that value from the input and does something with it in this case it's just displaying it in a paragraph but that is a good simple little script you can write after you start experimenting with some form inputs so i think in another video we're going to play around with a few other inputs and then we'll also attach some baby scripts to those take care you

Channel: Six Minutes. Smarter.

Views: 189,222

Keywords: 6ms, six, minutes, smarter, ralph, phillips, rrphillips, cis, cocc, central oregon, community college, computer and information systems

Id: aEj0Wu33hJM

Length: 6min 59sec (419 seconds)

Published: Sun Sep 26 2021