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.");
    }
}

Anaplastic

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.

Duodenary

If I use onchange, and Zone 1 is the first selection, then the browser would not register a change, correct? – Anaplastic

Also, is there a list of javascript events that should be deprecated? I am new to JS, and so this is the first time I have been informed not to use certain events. – Anaplastic

@Anaplastic That’s right. That’s one reason to begin with an empty one. Adding a click event handler might help, but that would complicate things with a genuine change. As regards deprecated JavaScript, a very good source is developer.mozilla.org/en-US/docs/Web/JavaScript – Duodenary

Thanks for the help. I would vote you up but I don't have the reputation to do so. – Anaplastic

@Anaplastic You’re welcome. You can accept the answer by ticking on it. – Duodenary

Why shouldn’t you use onclick in modern html? – Massasoit

@Massasoit It’s called unobtrusive JavaScript, or used to be when people were still using inline event handlers. HTML should be as unencumbered with JavaScript and styles as possible, leaving that to separate scripts and style sheets. In the case of JavaScript, the script should attach itself. – Duodenary

Answer 2

  // Function to focus the select element
  const openSelect = () => {
    if (selectRef.current) {
      selectRef.current.showPicker;
    }
  };
  <div>
    <button type="button" onClick={openSelect}>
    Open Select
    </button>
    <select ref={selectRef} id="myCheck">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    </select>
  </div>

Peloria

while this code may be correct and useful, an answer is more helpful if you add an explanation to the code. Code only answers are not the most appreciated here. – Showthrough