Responding to Onclick in a <select> HTML Element

Question

I have created a select element drop down list in HTML. The select tag has three options. An "onclick" JS event is attached to the select tag. In JavaScript, I have a matching function that alerts the user if and only if the first option has been selected. Here is a JSFiddle with my code.

https://jsfiddle.net/TempusF/rad11vgx/12/

The problem I am having is that, on Firefox for mac, this alert will only be displayed if you first select a different option. That is to say, if the page loads and "Zone 1" is displayed, clicking Zone 1 a second time will not trigger the alert. You must click to Zone 2 or Zone 3, and then click back to Zone 1 to get the alert.

However, on Firefox for Windows, any click on the Zone 1 option will display the alert.

This leads me to believe that I am incorrectly using the onclick event when a different event is more idiomatic. Perhaps the expectation is that I have a button below the select element that triggers the alert function, thus deferring execution. However, I would like to create an interface that reacts immediately when a select option has been chosen.

Here is the HTML:

<select id="zoneSelect" onclick="updateChar();">
  <option value="zone1">Zone 1</option>
  <option value="zone2">Zone 2</option>
  <option value="zone3">Zone 3</option>
</select>

Here is the ecmascript.

function updateChar() {

    var zone = document.getElementById("zoneSelect");

    if (zone.value == "zone1"){

        alert("You clicked Zone 1.");
    }
}

Answer 1

You shouldn’t use onclick in modern html, but you might try the following:

onchange="updateChar();"

Better still, you should set the event handler in the startup code. In any case, it’s still the change event.

Also, I recommend that a drop-down menu begin with a harmless null value, so that you don’t default to the first value — unless, of course, that is the intention:

 <option value="">Choose one …</option>

Edit

Apropos by comment that you shouldn’t use inline event handlers in modern JavaScript, here is how you would do it today:

In HTML:

<select id="zoneSelect">
    <!-- options-->
</select>

In JavaScript:

document.addEventListener("DOMContentLoaded",init);

function init() {
    document.querySelector('select#zoneSelect').addEventListener('click')=updateChar;
}

Better still, if the select element is part of a form, then it should have a name attribute, and you wouldn’t need an id attribute. In JavaScript, you can refer to it as:

document.querySelector('select[name="…"]')

and ditto for any CSS you might apply.