I am facing an issue where the onchange event of a dropdown menu is not triggering at all. I even tried redirecting it to a simple JavaScript function for testing purposes, but that didn't work either. I'm struggling to find a solution. Below is the sample code I have been working with:
HTML:
<div id="Category_and_Food">
<form>
<select id="categories" onchange="tested()">
<option value = "">Please select a category</option>
<option value="Appetizers">Appetizers</option>
<option value="Entree">Entree</option>
<option value="Specials">Specials</option>
<option value="Drink">Drinks</option>
<option value="Meat">Meat</option>
<option value="Soup">Soup</option>
</select>
</form>
<br />
<div id="cat_display"><b>Please select a category above</b></div>
</div>
Javascript:
<script type = "text/javascript">
function tested()
{
var x = document.getElementById("categories").value;
document.getElementById("cat_display").innerHTML = x;
{
</script>
Previously, I also attempted using the onchange event as onchange="tested(this.value)" with the function being adjusted accordingly.