Watch This Week’s Episode On Our YouTube Channel

Video Transcript

Welcome to the very first episode of Learn, Love, Live, Code – a show where I teach short coding tutorials in 5 minutes or less! This week, I will walk you through creating an HTML text box on a static web page and using JavaScript to get the value entered into the text box. Then, we will add a button to allow the user to add additional text boxes, get the values from all of the text boxes, and sort them in a JavaScript string array. The code for the static web page we will begin with in this lesson is the code from the completed Fundamentals of Web Development: Using HTML5, CSS3, and JavaScript YouTube Crash Course. Check out that course if you have not already! You can also get the code from the transcript of this episode on my blog HoffsTech.com/blog. The links for all of these things are also in the description for your convenience!

First, change the labels in the code above to the HTML input element with a type=”text”. Also, since the input tag is what is known as an “empty tag”, you can close the HTML tag in the opening tag.

In the JavaScript function sortHeroes(), change all of the variables from document.getElementById(‘id’).textContent to document.getElementById(‘id’).value (textContent gets the text inside of a label).

Save and load your web page in a browser (I prefer Chrome!). Enter the names of some of your favorite Superheroes and then click Sort!

Now let’s add a button to allow the user to add additional Superheroes. First, add an id to the ul tag. You can also remove the ids from the input tags. We are not going to get the values by id, we are going to loop through all of the input elements in our ul element instead.

Add a button with the value Add More Lines, onclick function addLineItems(), and CSS class sort-button.

In the script tag, add a new JavaScript function addLineItems(). In the addLineItems() function, create an HTML string for a new line item. Here’s a Tip! You can escape the single quotes for the type attribute in the input tag by adding a \ before the single quote. Then add your string to the heroesList ul element.

Save and load your page in your browser. Click the Add button a few times to witness the awesome job you just did!

Don’t click that sort button just yet, since we removed the id attributes from our input tags, we need to update the sortHeroes() JavaScript function to loop through all of the inputs on the page and get the values that way.

We will start with an empty heroesArray, then use document.querySelectorAll with the input type=text to get a list of all of the textboxes on the page. Finally, we will loop through all of our heroes and push the value of the current input to the heroesArray. If you haven’t guessed already, push adds a new value or object to an array.

Save, load, and type in the names of some of your favorite Superheroes. Click Sort and be proud of your mastery of JavaScript!

Completed Code

Have a great week and Happy Coding! #LearnLoveLiveCode