Do Function Based on User Select in Dropdown List

Question

I don't know why, but for some reason I am having a problem running a function based on user selection in HTML Select option...

I can get it to work when just doing one (querySelector), but when I do querySelectorAll and create a for loop, things aren't working.

Any help will be greatly appreciated!

let userLocation = document.querySelectorAll('#userLocation');

for(i=0; i < userLocation.length; i++) {
    userLocation[i].addEventListener('change', function() {
        if(userLocation[i].value === "North Carolina") {
             alert('True');
        }
    }
});

<section id="users">
    <div class="container">
        <div class="user-box">
            <h3>Frank</h3>
            <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Dan</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Jimmy</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Bob</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>

    </div>


</section>

D M · Accepted Answer · 2022-06-20T16:06:19.753

You have two errors:

The closing parenthesis and semicolon ();) for the call to addEventListener is placed after the closing curly brace (}) for your for loop instead of after the closing curly brace for your event handler function:

for(i=0; i < userLocation.length; i++) {
    userLocation[i].addEventListener('change', function() {
        if(userLocation[i].value === "North Carolina") {
             alert('True');
        }
    } // <-- ); should be here
}); // <-- ); is here

The indexing variable in your for loop uses the default var scope/definition which will cause all listeners to close around the last value (meaning all listeners will use the last listener's select's value. See JavaScript closure inside loops – simple practical example for more. You can fix this by using let i = 0 instead of just i = 0;

Here's your code with those two things fixed:

let userLocation = document.querySelectorAll('#userLocation');

for (let i=0; i < userLocation.length; i++) {
    userLocation[i].addEventListener('change', function() {
        if(userLocation[i].value === "North Carolina") {
             alert('True');
        }
    });
}

<section id="users">
    <div class="container">
        <div class="user-box">
            <h3>Frank</h3>
            <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Dan</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Jimmy</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Bob</h3>
             <label>Location:</label>
            <select id="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>

    </div>


</section>

A couple other things:

You should try to avoid duplicate id values in the same DOM. While querySelectorAll('#userLocation') works, id values should be unique. You can use a class for the same purpose and classes don't have to be unique.
You can avoid the number-based loop variable entirely by using Array#forEach() which allows you to close over the actual element reference instead of an index in the querySelectorAll collection.

Here's a sample with both adjustments:

let userLocation = document.querySelectorAll('.userLocation');

userLocation.forEach(l => {
  l.addEventListener('change', function () {
    if (l.value === "North Carolina") {
      alert('True');
    }
  });
});

<section id="users">
    <div class="container">
        <div class="user-box">
            <h3>Frank</h3>
            <label>Location:</label>
            <select class="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Dan</h3>
             <label>Location:</label>
            <select class="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Jimmy</h3>
             <label>Location:</label>
            <select class="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>
        <div class="user-box">
            <h3>Bob</h3>
             <label>Location:</label>
            <select class="userLocation">
            <option value="">Select</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Maine">Maine</option>
            </select>
        </div>

    </div>


</section>

Do Function Based on User Select in Dropdown List

1 Answers1