JS How to access current value from a created popup dropdown menu?

I’m trying to get the selected option (value) of the dropdown menu in a variable but I’m having trouble with getting it stored because I’m getting errors about it not existing. I understand that html can have order issues but because the popup’s html elements are all written in a JS file’s function I’m not sure how to circumvent that.

picture of popup

Essentially, I’m trying to use something like this at a specific point to save the selected option.

var chosenGender = document.getElementById("mySelect").value;

This gives me a TypeError: document.getElementById(...) is null which, I believe means that it can’t find my mySelect element which agrees with all the other tests I’ve run. This happens even when I check for an element I created and id’ed immediately before leading me to believe that there’s just something I’m missing here. How would I go about detecting completely new html elements that were inserted only with js?