What is the best way to check which dropdown option is selected?

Question

Here is my HTML:

    <select name="timezone-select" id="timezoneSelect">
      <option id="LA" selected value="America/Los_Angeles">LA</option>
      <option id="NY" value="America/New_York">NY</option>
      <option id="LDN" value="Europe/London">LDN</option>
    </select>

And this is the JS I am currently using:

  var currentTz = document.getElementsByTagName('select')[0].value
  function switchTz(newTz) {
    currentTz = newTz
    refreshTime(currentTz)
  }
  document.getElementsByTagName('select')[0].addEventListener('change', switchTz(document.getElementsByTagName('select')[0].value))

  function refreshTime(TimeZone) {
    datetime = new Date()
    console.log(datetime);
    document.getElementById("dtime").textContent = datetime.toLocaleString('en-US', {
      timeZone: TimeZone
    });
    document.getElementById("timeLoc").innerHTML = currentTz
    console.log(currentTz)
  }

The console says that currentTz is undefined whenever I run the code. I want the value of whatever option is selected in the dropdown box to be the new value of currentTz and I want it to run refreshTime(currentTz) anytime that an option is selected.

You're calling the callback rather than passing a reference to it. — pilchard, Jul 13 '22 at 21:14
Also querying the DOM is expensive, query the element once and store it for later use, or utilize the `event.target` implicitly passed to the assigned callback. — pilchard, Jul 13 '22 at 21:15
See [this Fiddle](https://jsfiddle.net/qov8021L/) for a working answer. — Scott Marcus, Jul 13 '22 at 21:33

What is the best way to check which dropdown option is selected?

0 Answers0