Introduction to For Loops

Topics Covered in This JavaScript & jQuery Tutorial:

Creating a for Loop, Using the for Loop to Set Menus, Clearing the Contents of a Menu

Exercise Preview

Exercise Overview

Automation lies at the heart of effective programming. One of the most powerful tools for executing repetitive tasks efficiently is the for loop. In this exercise, we'll demonstrate how to harness loops to create dynamic, interactive form elements that respond intelligently to user input. You'll build a date range selector that automatically adjusts available options based on user selections—a common pattern in professional web applications.

Getting Started

Before diving into the code, let's set up our development environment and examine the project structure we'll be working with.

1. Open your code editor if it isn't already open.
2. Close any files you may have open to start with a clean workspace.
3. For this exercise we'll be working with the Volunteer-Form folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it supports folder-based project management (like Visual Studio Code does).
4. Open index.html from the Volunteer-Form folder.

5. Preview index.html in Chrome. (We'll be using its DevTools later for debugging and testing.)

   This is a mockup of a volunteer application form (which doesn't actually function yet). The only components we're going to focus on are the From/To date selection menus—a classic user interface pattern you'll encounter in booking systems, reporting dashboards, and data filtering interfaces.

6. Click the menu next to From. Notice the range goes from Before 2000 to 2024.

   The To field is not selectable yet. We want to implement intelligent date selection logic so that after choosing a From value, the To menu only displays years equal to or later than the chosen From value—preventing users from selecting invalid date ranges.

7. Leave the page open in Chrome so we can test our changes in real-time as we develop.
8. Return to index.html in your code editor.
9. Around line 36, locate the select tag with an ID of from-year. Notice that it contains pre-populated option tags with assigned values (years). This static approach works for the initial menu but becomes unwieldy for dynamic content.

10. Around line 59, notice that the select tag with an ID of to-year is empty. For this select tag, we'll be generating the option elements dynamically using JavaScript—demonstrating how modern web applications create responsive user interfaces programmatically.

Creating a for Loop

Before implementing our dynamic menu system, let's master the fundamentals of for loops. Understanding how loops work is crucial for writing efficient, maintainable code in any programming context.

1. Around line 66, add script tags as shown in bold:

   </div>
      <script>
   
      </script>
   </body>

2. Within the script tags, write a simple for loop by adding the following bold code:

   <script>
      for() {
   
      }
   </script>

   The () parentheses contain three critical components that control the loop's behavior: initialization, condition, and increment. The {} curly braces contain the instructions that execute on each iteration of the loop.

3. Let's create a simple counting mechanism from 0–10. First, we need to initialize a counter variable to track iterations. Add the following bold code:

   for(var i = 0;) {
   
   }

   We could name the variable anything, but using i (short for "index" or "iterator") is a universal convention that makes code immediately recognizable to other developers. We initialize the counter at 0, following JavaScript's zero-based indexing philosophy.

4. Every iteration, the loop evaluates a condition. If true, the loop continues; if false, the loop terminates. This prevents infinite loops and defines the loop's boundaries. Add the condition to continue while i is less than 11:

   for(var i = 0; i < 11;) {

5. Finally, we need an increment expression that modifies our counter after each iteration. Add:

   for(var i = 0; i < 11; i++) {

   NOTE: The i++ operator is shorthand for incrementing by 1. You could alternatively write i = i + 1 or i += 1, but the increment operator is more concise and widely recognized in professional codebases.

6. Now we'll specify what happens during each iteration—in this case, logging the current value to the browser console for debugging:

   for(var i = 0; i < 11; i++) {
      console.log('The value of i is: ' + i);
   }

7. Save the file.
8. Return to Chrome and reload index.html.
9. Open the Developer Console by pressing Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows).

10. You should see the loop executed immediately upon page load, printing the incrementing values of i from 0 to 10. This demonstrates the loop's fundamental behavior: initialize, test condition, execute code block, increment, repeat.

Using the for Loop to Set Menus

Now we'll apply our loop knowledge to solve a real-world problem. When users select a year in the From menu, we want the To menu to dynamically populate with only valid subsequent years—a pattern commonly seen in date pickers, reservation systems, and analytical dashboards.

1. Switch back to index.html in your code editor.

2. Around line 67, delete the test loop we created:

   for(var i = 0; i < 11; i++) {
      console.log('The value of i is: ' + i);
   }

3. We'll start by caching references to our DOM elements for better performance and code readability. Type:

   <script>
      var fromYear = document.getElementById('from-year');
      var toYear = document.getElementById('to-year');
   </script>

4. Next, we'll attach an event listener to respond when users change the From menu selection. Add the following bold code:

   var fromYear = document.getElementById('from-year');
   var toYear = document.getElementById('to-year');
   fromYear.onchange = function() {
      console.log(fromYear.value);
   };

   NOTE: We're attaching the onchange event handler programmatically rather than inline in the HTML, which is considered a best practice for separation of concerns and maintainable code architecture.

5. Save the file.
6. Return to Chrome and reload index.html.
7. Open the Console using Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows).
8. Select a year in the From menu. The Console should display the selected year, confirming our event handler is functioning correctly.
9. Return to your code editor to implement the dynamic menu population logic.

10. Replace the console.log() statement with a for loop structure around line 70:

    fromYear.onchange = function() {
       for() {
    
       }
    };

11. Initialize the counter with the selected From year value:

    for(var i = fromYear.value;) {
    
    }

12. Set the condition to continue until we reach the current year (updated to 2024 for accuracy):

    for(var i = fromYear.value; i <= 2024;) {

13. Add the increment expression to advance by one year per iteration:

    for(var i = fromYear.value; i <= 2024; i++) {

14. Before implementing the complete solution, let's verify our loop logic with a test output:

    for(var i = fromYear.value; i <= 2024; i++) {
       console.log(i);
    }

15. Save the file, switch to Chrome, and reload index.html.
16. Ensure the Console is open.

17. Select a year in the From menu.

    The Console should display a sequential list of years from your selection through 2024, demonstrating that our loop correctly iterates through the valid year range.

18. Try selecting a different year in the From menu.

    You should see a new list starting from your new selection. The variable i initializes to fromYear.value, tests against our upper bound (2024), executes the loop body, then increments and repeats until the condition fails.

19. Return to your code editor to implement the actual menu population.

    Now we'll create the option elements dynamically. JavaScript's DOM manipulation capabilities allow us to construct HTML elements programmatically, assign attributes, add content, and insert them into the document structure—giving us complete control over user interface behavior.

    For each year in our range, we need to: create an option element, set its value attribute, add display text, and append it to the to-year select element. This approach mirrors how modern frameworks like React and Vue.js handle dynamic content generation.

    Around line 69, declare a variable to hold our dynamically created option elements:

    var toYear = document.getElementById('to-year');
    var option;
    fromYear.onchange = function() {

    NOTE: Declaring the variable outside the loop improves performance by avoiding repeated variable creation, a micro-optimization that matters in frequently executed code.

20. Replace console.log(i); with the option element creation code around line 72:

    fromYear.onchange = function() {
       for(var i = fromYear.value; i <= 2024; i++) {
          option = document.createElement('option');
       }

    NOTE: createElement() is a fundamental DOM method that creates new HTML elements in memory. You can create any valid HTML element by passing its tag name as a string parameter.

21. Set the value attribute that forms submit will use:

    for(var i = fromYear.value; i <= 2024; i++) {
       option = document.createElement('option');
       option.setAttribute('value', i);
    }

    NOTE: The setAttribute() method takes two parameters: the attribute name and its value. This creates the underlying form data that will be submitted when users make their selection.

22. Add the visible text content that users will see in the dropdown:

    for(var i = fromYear.value; i <= 2024; i++) {
       option = document.createElement('option');
       option.setAttribute('value', i);
       option.textContent = i;
    }

    NOTE: We set both the value attribute (for form submission) and textContent (for display). If i is 2020, we create: <option value="2020">2020</option>

23. Finally, insert each option element into the to-year select menu:

    for(var i = fromYear.value; i <= 2024; i++) {
       option = document.createElement('option');
       option.setAttribute('value', i);
       option.textContent = i;
       toYear.appendChild(option);
    }

    NOTE: The appendChild() method adds elements as the last child, maintaining the chronological order of our options. This is the standard way to build dynamic lists in web applications.

24. Save the file.
25. Switch to Chrome and reload index.html.
26. Select a year in the From menu.
27. Click the To menu and verify it contains only years from your selection through 2024.
28. Try selecting a different From year.

29. Check the To menu again. You'll notice it accumulates options rather than replacing them—we're adding to the existing list instead of starting fresh. This is a common bug in dynamic interfaces that we need to address.

Clearing the To Menu

Our current implementation has a critical flaw: it appends new options without removing existing ones, leading to cluttered, confusing menus. Professional applications require clean state management to maintain usability. Let's implement proper menu clearing to ensure each selection provides a fresh, accurate list of options.

1. Switch back to your code editor.

2. Around line 71, add a clearing operation before populating new options (note the empty string uses two single quotes):

   fromYear.onchange = function() {
      toYear.innerHTML = '';
      for(var i = fromYear.value; i <= 2024; i++) {

   NOTE: We use innerHTML rather than textContent because we need to remove HTML elements, not just text. Setting innerHTML to an empty string effectively removes all child elements, giving us a clean slate for new options.

3. Save the file.
4. Switch to Chrome and reload index.html.
5. Select a year in the From menu.
6. Verify the To menu contains only appropriate years (from your selection through 2024).
7. Select another year in the From menu.

8. Confirm the To menu updates correctly without accumulating old options. Excellent—we now have a fully functional dynamic date selector!

Optional Bonus: Refining the Menu Selection Experience

While our implementation works correctly, it doesn't provide optimal user experience. Consider this scenario: a user selects both From and To dates, then needs to adjust only the From date. Currently, changing the From date resets the To selection, forcing users to make both selections again—frustrating and inefficient.

Professional applications preserve user input whenever possible. We'll enhance our code to maintain the selected To date unless it becomes invalid (earlier than the new From date). This demonstrates thoughtful UX design and advanced state management techniques used in production applications.

1. Return to index.html in your code editor.

2. Around line 69, declare a variable to preserve the current To year selection:

   var option;
   var toYearVal;
   fromYear.onchange = function() {

3. Capture the existing To year value before clearing the menu:

   fromYear.onchange = function() {
      toYearVal = toYear.value;
      toYear.innerHTML = '';

4. After populating the new options, add logic to restore the previous selection if it remains valid. Around line 79, add:

   toYear.appendChild(option);
      }
      if(toYearVal >= fromYear.value) {
   
      }
   };

5. If the previous To year is still valid (greater than or equal to the new From year), restore it:

   if(toYearVal >= fromYear.value) {
      toYear.value = toYearVal;
   }

6. Save the file.
7. Reload index.html in Chrome.
8. Select a year in the From menu.
9. Select a year in the To menu.
10. Change the From menu to an earlier year (creating a larger valid range).
11. Notice the To menu preserves your original selection—exactly what users expect.
12. Verify the To menu's available options updated to reflect the new range.

13. Test the edge case: select a From year later than your current To year. The system should intelligently reset the To selection to prevent invalid date ranges.

    NOTE: For reference implementation, see Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Volunteer-Form.

You've now mastered for loops and applied them to create sophisticated, user-friendly form interfaces. These patterns—dynamic content generation, state preservation, and intelligent validation—form the foundation of modern web application development. Understanding these concepts positions you to tackle complex UI challenges in frameworks like React, Angular, and Vue.js, where similar principles apply at scale.