Here is a drop-down list and you need to determine which element is selected but an error occurs. Please help to understand.
app.js:350 Uncaught TypeError: Cannot read property 'options' of undefined
at onChangeSelectCategory (app.js:350)
at HTMLSelectElement.onchange
with HTML:
<body>
<p align="center"><label>Category</label></p>
<p align="center">
<select onchange="onChangeSelectCategory()" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
</select></p>
<p align="center"><label>Sub Category</label></p>
<p align="center">
<select style="visibility: visible" id="subCategory" class="category" name="subcategory" style="width: 300pt">
</select></p>
<script src="scripts/app.js"></script>
</body>
and JS:
var adCategoryRef = document.getElementById('adCategory');
var subCategoryRef = document.getElementById('subCategory');
function onChangeSelectCategory() {
var adSelectedCategoryVal = adCategoryRef.options[adCategoryRef.selectedIndex].text; //error
switch (adSelectedCategoryVal) {
case 'Category 1': {
