Click event only retrieves data from (async) Select element once

Question

I'm attempting to have a button pass select element values to a function, but the function only seems to collect the values once, and will only return the first selection when the select dropdown value is changed and submitted. How do I keep the value up to date relative to what's being selected? Code:

template.ejs

            <li class="items">
                <label>change user type:</label>
                <select name="user-types" id="user-type-select">
                    <option value="user">User</option>
                    <option value="dealer">Dealer</option>
                    <option value="admin">Admin</option>
                </select>

                <button id="user-type-submit">Submit</button>
            </li>
        </ul>

script.js

const userTypeButton = document.querySelector('#user-type-submit')
const userTypeSelect = document.getElementById('user-type-select')
const selectElementValue = userTypeSelect.options[userTypeSelect.selectedIndex].value;
const selectElementText = userTypeSelect.options[userTypeSelect.selectedIndex].value;

userTypeButton.addEventListener('click', (event)=>{
    console.log(selectElementValue);
    console.log(selectElementText);
})

Answer 1

You need to log the value of the select itself inside of the event listener so you get the value of the select and it won't return a stale value. If you get the value before it will return the value that the select was when the script is first run and not when you click the submit button. So it would look like:

userTypeButton.addEventListener('click', (event)=>{
    console.log(userTypeSelect.value);
})

This will give you the updated value of the select.

Answer 2

You're capturing the initial value when your script first runs, and then logging that (original) value each time.

Changing the select won't update the value of your existing variable. You should query it when the event occurs:

userTypeButton.addEventListener('click', (event) => {
  console.log(event.target.value);
})

Answer 3

first:

when you declare a const variable, you cannot change what you assign to it anymore, so the value inside of it is fixed.

second:

you fetched the value from the select and put it inside of a const variable, so it can never change even if you select another option.

try this script.js:

const userTypeButton = document.querySelector('#user-type-submit')
let userTypeSelect = document.getElementById('user-type-select')
let selectElementValue = userTypeSelect.options[userTypeSelect.selectedIndex].value;
let selectElementText = userTypeSelect.options[userTypeSelect.selectedIndex].value;

userTypeButton.addEventListener('click', (event)=>{
    console.log(userTypeSelect.options[userTypeSelect.selectedIndex].value);
})