Embedded Files
Welcome to the thirteenth lab of Team Edge!
Welcome to the thirteenth lab of Team Edge!
In this lab, we cover adding user input elements and DOM manipulation.
Challenge 1 : User Input
Challenge 1 : User Input
Go to this link and remix the project.
New Skills :
New Skills :
Add interactive elements, such as input and buttons, to the web page
Add functionality to each of the interactive elements using DOM manipulation
Call built in methods to select HTML elements using JavaScript
Modify elements' CSS properties using JavaScript
Review Skills :
Review Skills :
Adding attributes to HTML elements
Styling elements using CSS selectors and properties
Challenge 2 : More Input
Challenge 2 : More Input
Go to this link and remix the project.
New Skills :
New Skills :
Add more input elements of other types
Reference
Reference
DOM Manipulation
DOM Manipulation
The DOM, or the Document Object Model, is created by the browser when it loads web page. It allows the programmer to access HTML elements with JavaScript.
HTML elements can be accessed by using the querySelector() method. The method takes in a selector as an argument and returns the first element that matches the selector.
In the example on the right:
document.querySelector("div") will select the first div element in the document.
document.querySelector("div.example") will select the first div element in the document that has the class="example".
The querySelectorAll() method can also be used to select multiple elements. The method takes in a selector as an argument and returns an array that contains all elements that match the selector.
Hover over each of the querySelector() methods to test it out!
Hover over each of the querySelector() methods to test it out!
Accessing the Element's Properties via JavaScript
Accessing the Element's Properties via JavaScript
After selecting the elements you want to modify, you can access the selected element's properties using the dot (.) operator and assigning the new value.
document.querySelector("div").style.background = "#6495ED";
In the example above, the first div element is selected. We can access its background property by using the dot operator to specify the property we want to affect (.style.background) and then assigning the new value with the assignment operator (=).
The text of the element can also be changed in the same manner:
document.querySelector("div").innerHTML = "Hello World!";
Input Elements
Input Elements
Buttons
Buttons
Buttons can be created using the <button> tag.
<button type="button">Click Me!</button>
The button's type attribute specifies the type of button it is: submit (default), reset, or button. Class attributes can also be added to style the buttons.
To make the button functional, add the onclick attribute and assign a function to it. Whenever the button is clicked, it will call the specified function.
Note that this is similar to a button created with the <input> tag. See the Inputs section for the difference.
Inputs
Inputs
The <input> tag allows us to get user input in many different forms.
<input type="text" id="fname" name="fname">
/* This will create an input textbox. By giving the input a name, it will make it easier to identify when we want to add functionality. */
Some input types include: checkbox, color, password, search, text.
You can find the rest of the input types in the reference linked below.
Note that the <input> tag also has an input type="button" which will be rendered similar to the <button> tag. The difference between the two is that <button> will allow you to add content within it, whereas the input button does not.
Demos
Demos
Example 1: Interacting with Buttons and Divs using some key JavaScript methods:
Example 1: Interacting with Buttons and Divs using some key JavaScript methods:
Example 2: More inputs
Example 2: More inputs
See how other inputs can be handled. Clone and tinker!
Example 3: A basic sign in form
Example 3: A basic sign in form
Additional Resources
Additional Resources
Report abuse