What is it?
Why should I learn it?
What can I do with it?
You can change the elements of a page based on a user's input. You will learn about manipulating the Document Object Model (DOM) to customize pages and present data.
How long will it take?
getElementById(); is a magical method that you can use to access parts of a Web page. We'll be working with this and other functions that "manipulate the DOM" or change the Document Object Model. We'll apply this method to change what is displayed on the page or the "innerHTML" of the element to which we are applying it. This will be very powerful when combined with forms to ask a user for input to change something on a page.
There are other methods like getElementById, including getElementsbyTagName, getElementsbyClassName and querySelector that you may need to use to achieve certain functionality, but we will start with getElementById, since it is designed to change one element on a page.
Interactivity with a Prompt
Let’s properly structure the document to include the HTML5 doctype declaration.
We'll make a page that prompts for a name and then changes the innerHTML of the document to reflect that name. Copy the code on the right and paste it into a text document.
Notice that the code includes a span with an id of "firstname." We'll be filling that span with the result of the prompt. We open the getElementbyId method with the document object and include the innerHTML property. Then we assign the value "firstname" that was collected from the prompt.
Code Sample - Basic Interactivity
Interactivity with Multiple Prompts
You can include multiple prompts assigned to different variable names to add more information to the page. For example, you could also prompt for last name, email and other information.
Remember the previous exercise where you determined your popstar name? Let's create a script that prompts for first and last name and calculates it for anyone.
Code Sample - Multiple Prompts
Interactivity with an if Statement
You can now start implementing different techniques to have your programs make decisions. Let's use an if statement to determine if someone's password is of an appropriate length. See the script at the right that prompts for a password, determines the number of characters and provides a response as to whether the password is greater than or equal to 8 characters or not.
Code Sample - if Statement
Do a Calculation
You can use programming to, of course, do some good ole math. The script to the right prompts the user for two numbers, then adds them. Look, a calculator!
Notice in the code the use of the parseInt method. When a variable is created with a prompt, the program doesn't know yet that it is a number. You use parseInt to convert it to a whole number or use parseFloat if you want the numbers to be able to include decimals.
Play around with the code to do some of your own calculations, based on the math operators we learned in the previous exercise.
Code Sample - Calculation
Change the program around to perform some different types of calculations on your own.
A simple script to illustrate the use of an event is provided to the right. It includes an "onclick" event on the h1 element. The script, which is simply called within the h1 element, uses the "this" object to indicate the current element and changes the innerHTML.
Code Sample - Event
Change the program to use the onmouseover event, instead of onclick. Consider the situations in which one is preferred over the other.
Interactivity with Form
So far, we have received inputs from users via prompts and events. But a more efficient way is to use forms to capture multiple items and execute a script on the onsubmit event.
The code to the right creates a form (remember the code from the HTML forms tutorial) that asks for a first and last name in two different text fields. When the user submits the form, the document reflects a welcome message that is customize for the user.
Notice that we have an onsubmit event applied to the id associated with the form. Then the script executes a function that stores the form inputs in variables and manipulates the DOM element "yourname" to include a welcome message that is customized for the user.
There are other things you can manipulate with getElementById. You can change the style of an element by including a style property.
Add the code above to the end of your script to turn the line bold.
Code Sample - Forms
The code above has been modified to use the label element with the form inputs.
Exercise: Add another input item for City to this form and create a DOM element to receive it, then modify the script to manipulate the DOM to include this new information.
Form with Array and for Loop
Let's create a form that asks for three names. We want to use the length method to evaluate the number of characters in each. Instead of doing this three different times, let's create a loop that reads each item from the array that we create to hold the items. We grab the value of each form element. The script then writes a line that includes each name and some text including the number of characters on a separate line. Notice that the loop condition evaluates to namelist.length, which means it is continuing until the end of the array. When the length property is used on an array, it returns the number of elements in the array.Also notice the
Use the code to the right to create your script and run the file.
Code Sample - Forms
Notice in the code above the use of "+=". This appends to the innerHTML rather than overwriting.
Exercise 1: Add a calculation that adds up the characters in the three names. Create another element with an id to hold that answer.
Exercise 2: Modify this code yourself to add an if statement that adds an asterisk if the name has more than four characters. You will probably need an else statement to handle what it should do if it doesn't.
Exercise 3: Modify the code so that the user can input a number of characters to evaluate. Instead of checking for four characters, it will check for the number indicated.
Using a Dropdown
Dropdowns are similar to text inputs. You simply use getElementById to grab the value and put it in a variable. Notice that you can use the onchange event without a submit button. That also means you get remove the "return false" statement. You decide which type of event is appropriate for the type of interaction you desire.
Code Sample - Dropdown
Exercise: Add another dropdown to this form and create a DOM element to receive it, then modify the script to manipulate the DOM to include this new information when each dropdown changes.
Using querySelector with a Radio Button Series
Radio buttons function a little differently than text inputs or dropdowns. You use the querySelector method to select the checked value in the series. We will use this method in the Interactive Quiz tutorial.
Code Sample - querySelector
Exercise: Add another radio button series to this form and create a DOM element to receive it, then modify the script to manipulate the DOM to include this new information when the form is submitted.
Use the script to the right to start to provide solutions to the following problems. The form and input element are already set up for someone to submit a password, and there are several DOM elements already set up to hold your answers.
- Return the password to a DOM element.
- Return the number of characters in that word to a DOM element
- Return the first character to a DOM element.
- Return the last character to a DOM element.
- Use an if statement to test if the first character is uppercase and indicate in a DOM element. Hint for 5 & 6: (letter.toUpperCase() == letter) changes the letter to uppercase and checks to see if it is the same as the original letter. If so, then it is uppercase.
- Use a loop to test if any character is uppercase and indicate in a DOM element.
Notice that a generic function is set up using the onsubmit function associated with the form with the "form1" id. Everything you do must go within this function. The return false; statement is required so that the form doesn't submit, only the DOM changes.
You should be able to get 1-3 pretty easily. 4-6 are a little more challenging. Take your time, think through the algorithm. Don't let the code beat you!
Code Sample - Another
We are starting to add interactivity to Web pages. The Web pages we are working on here simply demonstrate the functionality. Remember that you will need to include this functionality in well designed, responsive websites, as you learned in previous lessons. Think about the layout structure and create a div or series of divs to include your form and resulting functionality.
You've had a lot of experience now with using programming techniques to solve a variety of problems. Next we’ll apply more comprehensive techniques in making an Interactive Quiz and with the Interactive Charting Exercise.