Responding to Onclick in a <select> HTML Element
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.
TempusFuu
Updated on August 22, 2020Comments
-
TempusFuu almost 4 years
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."); } }
-
TempusFuu about 7 yearsIf I use onchange, and Zone 1 is the first selection, then the browser would not register a change, correct?
-
TempusFuu about 7 yearsAlso, 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.
-
Manngo about 7 years@TempusFuu 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 genuinechange
. As regards deprecated JavaScript, a very good source is developer.mozilla.org/en-US/docs/Web/JavaScript -
TempusFuu about 7 yearsThanks for the help. I would vote you up but I don't have the reputation to do so.
-
Manngo about 7 years@TempusFuu You’re welcome. You can accept the answer by ticking on it.
-
Soenhay over 5 yearsWhy shouldn’t you use onclick in modern html?
-
Manngo over 5 years@Soenhay 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.