JavaScript for Beginners #2 - Modifying HTML Elements (getElementByID, innerHTML etc. )

Key Takeaways

all right so we're back here where we left off what we did in the last video was discussed the difference between document and console I'm gonna quick give you a really quick overview and then what we're gonna do in this video is actually talk about how we can access HTML elements so essentially you know say this h1 tag here well it's kind of boring to just like write some stuff and you know do some errors and warnings how can I actually change the value of this how can I move it around how can I change the color I'm not gonna show all of this but I'm gonna give you the basics and that's something we're gonna work towards as we move to this videos and this is hopefully something you guys will notice that I start small make sure you guys really have the fundamental concepts down and then I slowly kind of move into some more advanced topics where you guys will start to understand a lot of people like to kind of do everything in isolation and go really hard on one topic that's good in some instances but if it's too advanced and you don't get it it's really detrimental to kind of the learning process in my opinion so anyways let's now just look at what we did last time so we see we have this hello hello hello so the log warning this is an error that's great what I'm gonna do is actually remove all this now and we're gonna do something so we can modify this HT m h1 tag and actually get the value of it now in HTML we have something called IDs and IDs are typically the way that we're actually gonna reference an access specific elements in our document so in this case what I'm gonna do is set an ID for my h1 tag and I'm just gonna call this header now you can make this ID whatever you want but make sure you put in quotation marks and make sure it kind of looks like this format here so header and what I want to do is I want to get the value or change the value of this h1 tag now how do I actually reference this element well like we talked about in the last video we have something called consul and we have something called document now the difference between consul and document is that consul is going to be referring to you know that little console window that we had here and document is actually referring to the HTML document itself so this whole thing so if I want to reference the h1 tag here with the ID of header what makes sense to use consul or document well in this case I'm going to say document because this is not a part of the consul it is a part of my HTML document so the method that we use to actually gain access to this element something called get element by ID now if you've ever seen JavaScript before chances are you've seen this and that's because this is a very common syntax now what I need to do is actually give the ID of the element that I want to access so in here I'm going to type header now let me just kind of breakdown this line for you because if you've never programmed before this might be a little bit confusing what's going on here document is referring to this HTML document this dot here means that we're about to call a method on this HTML document now a method is simply an operation a function something that happens it can get a value it can you know create a value you can do all kinds of different things and you call it by doing dot the name of the method an Open bracket a closed bracket and then some kind of parameters or parameter inside now there's not always something in here sometimes it's blank like this but usually we have something called a parameter now a parameter is something that you pass to the method of value you give it so that it can do something with that value in this case what this method is gonna do is get the value header and return to us the actual h1 tag here that has the ID of header to allow us to do some operations on it so the first operation I want to do is actually change the value of hello to be something else the way that I do that is using another method well not really method it's gonna be actually a property called inner HTML so here we have document dot get element by ID header that's gonna give us this h1 tag dot inner HTML which is actually referring to what's inside of these tags so whatever it says inner HTML that means pretty much what's between the two tags and now what I can actually do is use something called an assignment operator which is just gonna be the equal sign and set this value to be whatever I like so here I'm gonna make this tech with Tim exclamation point now remember we have to end our line with a semicolon because that's how we know the operation and kind of statement is finished but let's try this I think I've broken this down enough that you guys should understand and when i refresh the page notice all our logs go away and we get tech with Tim as the new value for h1 tag so I think that's pretty cool and I mean with very minimal knowledge you can already modify elements on your page now that's awesome but what if I actually want to get the value of my innerhtml say maybe this changes to something whatever it is and I actually want to get to the value how do I do that well what I can do is rather than changing the value here I can simply print it out and show it on the console or I can actually write it to a new tag and that's something interesting that we can do as well so let's try that so if I actually want to display this on the HTML by page sorry and I don't want to display it in the console am I about to use documents or am I about to use console well I would hope you guys would answer with document because that means I'm actually gonna display it in the HTML document so like I showed before I'm gonna use document dot write and all I'm actually gonna do is simply write whatever the value is of the inner HTML of the elements ID header so in this case I should write hello but I'm not gonna write it inside of any h1 tags so it should look a little bit different and you guys should notice this so let's refresh and now we get hello and we get hello so we've simply just written that you know next word by doing this document to write get element by ID header awesome that is you know pretty much how that works now what I'm gonna do is actually create a new tag here and I'm gonna call this one an input tag so I'm gonna say h1 or someone by saying h1 I'm gonna do input type if I could type here in equals text and then ID equals InP now what this is gonna do is simply create a little text box that I can type in and the reason I want to do this is because I want to show you how we can change the value of this text box and as we go through we'll be changing some different values and you guys will see how this works for all different kinds of HTML tags so in this case if I want to change the value of a text box what I need to do is similar to what I've done before so obviously this text box is in my document cyanotype document dot get element by ID and in here I'll just add my semicolon at the end here what I'm gonna do is simply put the ID which is InP so what I've done now is you know reference this text box so now how do I get the value of it well I just simply do dot value now you might think that it would be like dot text but that is actually not the case in this case we're gonna do dot value and we're simply gonna do what we've done in the previous one it just changed values so in here we'll do it hello now before I do this I actually just want to show you what the text box looks like without this change so I'm gonna introduce to you something called a comment now essentially what a comment is is it is something that is there but it's not going to be read by the computer it's a line that's gonna be skipped over that you can still have there but it's not gonna mean anything so in this case what I've done to actually create a comment is I've done two slashes now two slashes simply means comment it's the same syntax as jabba if you've ever seen that before and notice that my line gets grayed out and watch when I run this code here you can see that all that actually changes is we get this text box here we don't end up changing the value to a low because this was a comment now if I uncomment this by removing those you'll notice when I go back here the value in my text box changes to hello that is kind of the basics of how about how that works right now I'll show you a multi-line comment as well which is essentially and this so you do a slash a star another start and then a slash now what this allows you to do is comment on multiple lines right so these are all comments this is obviously not you know proper coding syntax just type in hello so this will allow us to kind of skip over that because whereas here if I do something like hello and then I go to the next line I type hello you can see this isn't commented out because what this stands for is a single line comment you may see me use some of these so I just want to make sure you guys were aware of how those work all right now what I'm actually gonna do is I'm gonna make an error here in the code because I want to show you guys what it looks like when you make a mistake because chances are you guys will be doing that quite often as you learn how to do this so for example let's try to just type X in my line here okay and let's run our JavaScript code and notice that if we're looking at the console here we get uncaught reference X is not defined now these are error messages that you guys will see all the time as you start going through this you'll start to understand what these messages meet I'm not gonna explain exactly what this is but it's very important that you actually read these messages so say you know you get an error and like you're commenting down below you're like Tamm it didn't work I don't know what the issue is what I'm gonna ask you to do is give me what the errormsgs and what line this message is on so that can help understand what the issue is so these are meant to be useful messages that kind of tell you you know what's going on in your program what's wrong and here we're getting a message saying X is not defined which essentially means we don't know what X is right this is not valid we can't put it here and don't worry if you get an error cuz all you need to do is fix it and there we go the error goes away so that's what I want to show you you guys will get all kinds of these and it's really important that you kind of look up those error messages and start understanding what it is that you've actually done wrong because that's the fastest way to learn rather than you know just sitting there and kind of going how is this work right it's really easy just go the internet look it up and figure out what the issues ok so that I think is really all I wanted to cover I'll show you one more thing which is let's say we want to print out the value of our textbooks and this is let's see actually console dot long document decade elements so in theory what this should do is print out with the value of our text input boxes right and that's exactly what's gonna do so I'm gonna show you now how this works so what we've done is we've simply logged the value of a document don't get element by ID input about right so when we look here you can see that up in here we get nothing but what if I type hello does we do we get a log that says hello we are printing out the value of whatever's in our input box is there reason that in the log here I don't get that answer what if i refresh the page I still not getting hello printed out well the reason I'm not getting that is because what actually ends up happening when you run this code here is we read each line line by line so what happens is we have HTML we read body read h1 we read this we read this and we execute them in sequence so we start by doing hello then we make this text input box then we go into the script tag we run whatever is in the script so this means we run this console dot log and we print the value and this happens immediately whenever we run the webpage now can you think about why this might be problematic well essentially if I want to print out the value of what the user typed in this box I can't do that by just you know logging whatever it is immediately because immediately when i refresh the page that text box is blank so if we want to do that we need to use something called a function which I mean talk about in later videos anyways that's all I wanted to cover today I want to show you guys a little bit errors I want to show you how we can get some elements I know I'm going to very slow through this but again this is really meant for beginners and I want to make sure that anyone watching this is able to understand I'm going to slow let me know we can always fast forward the video and kind of skip through the parts that you need so that being said as always leave a like subscribe to the channel down below and let me know what else you guys would like to see in other JavaScript tutorials