With this example javascript I’d like to talk about accessing elements on the web page from the JavaScript code so I’m just going to explore the HTML file first and take a look at the elements on the HTML page and then we’ll look at the JavaScript to see how we can access the elements on the HTML page or within the web page document. So the first thing you notice i have some basic elements nothing really new. The first one I want to look at is the first paragraph tag that we see here. With this first paragraph tag the only real difference that you might notice would be the ID indicator here. Notice the ID attribute is being assigned a name and the name is a string and you’ll notice I use the apostrophes. You could use the double quotes, you just have to be consistent. The next thing you might notice that is a little bit different, is I just put some static text right on the page here with this first name colon, there is a space there right after the colon. Following that I have an input element and the input element is very simple it has no closing tag you’ll notice on this input element, but it also has an ID attribute and again I gave it a unique name, in this case its input 01. A couple of breaks move the next item down the page a bit and that’s last name and it also has an input element following it and of course its got an ID attribute and I changed the name here to input 02 so that we can distinguish between these two input elements. A few more breaks and then a text area and again of course i added an ID attribute to the text area and I gave it the name text 01 and of course i use apostrophes you’ll also notice that i specify how many columns I wanted it to be, this is the width of the text area and I specified five rows, again these are both attributes of a textarea and again i’m assigning a value to that attribute and the values for your attributes need to be strings, I used apostrophes you could use the quotes, and then the closing tag for the text area of course is required. Down to the bottom here you see I have a button. I didn’t need the ID attribute for my button because i wasn’t going to try to access this button from my JavaScript. But i did want the click handler for my button so that when the user clicks on the button it would call the correct function in my javascript and so this is simply another attribute, the on click attribute, and again I assign a string to that attribute and in this case of course its main with the parentheses and again that has to be in the apostrophes or quotes. This is just a label that you see on your button of course and then the closing tag for your button, nothing too new here. Finally at the bottom I have my script tag that refers to the external script file, the external script file in this case. I just named it script.js. Again that’s just another attribute element of the script SRC attribute and I’m assigning the script filename to that source attribute. Notice in this case I did use the quotation marks rather than apostrophes, either one, it doesn’t matter. Now this does refer to a file called script.js so you need to make sure in your file listing that your script file is the same thing that you used in the source tag here. So let’s take a look at that script file, so I’ll click up here in the file listing for script. So here’s my script file a simple little comment up here at the top nothing too mysterious but just a little comment at the top and finally then we get into the function itself so here’s main() again that’s the name of the function that I’m calling from my HTML and I have four lines of code here and these four lines of code simply declare four variables and assign values to those four variables so let’s just take a look at this first variable again these names are arbitrary you can name them whatever you want they should name something that reminds you what they’re being used for, the first variable we see here is called para element and we’re assigning the value to that variable by going to the web document you’ll notice the word document here that’s a predefined variable that’s available to JavaScript in a web application, so we can access the document element from our webpage and that document element has a function called getElementById and you have to get the case correct if you’re using Thimble it pops up some pick lists and you can just pick that function name from the pick list so you don’t have to type it but if you ever do find yourself typing it out yourself, be very careful getting the case right with the capital E capital B the capital I so that get element function is essentially asking the document element which item from the webpage do you want to get and in this case you’ll notice I simply put the ID name that I used on my webpage for that paragraph, so the ID in my HTML called paraOne para zero one, again notice it’s a string so it’s in the quotes there it’s actually apostrophes in this case and so I did that for the other three variables defined in the second one I wanted to get the input box the first input box after first name the third one I used input 02 for the last name and then to get the text area element I named that one text 01 and so get element by ID goes out and grabs the individual HTML objects from the page, a paragraph, the two input boxes, and the text area, and stores them in these variables, so now my JavaScript program has access to those four objects from the webpage, so this next example you see here with paraElement is simply accessing that paragraph object from the web page and accessing its inner HTML property you notice the dot notation here says go to the paragraph object, the paragraph element object that I stored in my variable, and access its inner HTML and assign, that’s the assignment, assign this string, this is just a random string, testing 123, and assign it to the innerHTML, now when we actually click the button and run this code you should see the contents of that paragraph change to this string, so before we do that let’s read on down the rest of this, the next line you see is another variable declaration where I declare a variable called first name and the value I assigned to that is the value taken from input box 1 the object input box one has been assigned to my in01 variable, I access its value property, notice for input boxes I use the value property rather than the innerHTML property, so I use the value of property of that input box object, it gives me whatever is in that input box and assigns at then to this firstName variable, I do the same thing with the lastName variable. I go to in02 that’s the variable names that I used to store the second input box, I access its value property, which gets whatever text is inside that second input box and we store that in the lastName variable so now we have those two variables and finally I’d like to put those values the first name and last name values I’d like to put them into my text area so you’ll notice the very last line essentially takes the string hello, notice the quotes, adds to that, or concatenates, we call string addition here, we call that concatenation, it’s like gluing strings together, we take the hello, we glue onto the end of that the first name variable, which takes the value of that variable and glues it onto hello then we glue on a space, that’s the space inside those apostrophes, you have to hit the space bar, and finally then we glue on the last name value and we get this long string that says hello and whatever the first name is and a space and whatever the last name is, we take that whole string and we assign it to the value property of the textarea object, which has been stored in this variable called text01, so the value property then is how you access the text in a textarea object, so when we run this then it should put the first and last name into that text box. Now before we actually try this out I’d like to just take a peek at this style sheet so the style.css page is quite simple we see that it just does a little bit with the font so the body is to sans-serif, the button size, font size, is 20 pixels, and then the last three elements the paragraph is 18 pixels and the input boxes, notice it just says an input element here any input element is going to have the font size of 18 pixels and then any text area element will also have a font size of 18 pixels, it’s just a little sample of how you can style elements on your page. So now let’s go over to the preview window here and see what’s going to happen, if i type in first name here, so I’ll type in Bob in the first name box and I’ll type in Smith in the last name box and then if I click my button of course it should change the paragraph element up here to testing 123 and it should put Bob Smith into the text area, I’ll click the button and there it is Hello Bob Smith and of course the testing 123 of my paragraph has been changed up at the top. So I’ll click back on my HTML page, there is the entire HTML, click on the script file and there is the entire JavaScript for this. Give that a try.

Accessing Web Page Elements with JavaScript
Tagged on:                 

One thought on “Accessing Web Page Elements with JavaScript

  • September 20, 2019 at 10:51 pm
    Permalink

    I like your tutorials Sir. All the way from Nigeria. God bless.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *