"Uncaught TypeError: Cannot read properties of null (reading 'options')" but select menu options are not null

Question

The following JS function is supposed to assign the value from the chosen drop-down menu to the variable "menuItem" and reset the other three menus when the user changes one of the menus.

However, [when I run it in CodePen][1], I keep getting the following error:

Uncaught TypeError: Cannot read properties of null (reading 'options') at [… line] 3

I looked up what that error means, and understood it to mean an option in a select menu has no value. But all the options in the test menus have values.

Can someone explain (without getting too technical) why the error is happening, and suggest a fix?

<label for="label">Select a menu item:</label>
<select id="MenuOne" class="TestMenu" onchange="setMenuValue(MenuOne)">
  <option selected value="9999">Numbers</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>
<select id="MenuTwo" class="TestMenu" onchange="setMenuValue(MenuTwo)">
  <option selected value="9999">Phonetics</option>
  <option value="alpha">Alpha</option>
  <option value="bravo">Bravo</option>
  <option value="charlie">Charlie</option>
</select>
<select id="MenuThree" class="TestMenu" onchange="setMenuValue(MenuThree)">
  <option selected value="9999">RGB</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<select id="MenuFour" class="TestMenu" onchange="setMenuValue(MenuFour)">
  <option selected value="9999">Pets</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="hamster">Hamster</option>
</select>
<div id="label"></div>

function setMenuValue(menuId) {
  // Get the selected option from the menu.
  var selectedOption = document.getElementById(menuId).options[
    document.getElementById(menuId).selectedIndex
  ];

  // Set the value of the "menuItem" variable to the value of the selected option.
  var menuItem = selectedOption.value;

}

  [1]: https://codepen.io/rcosgrove/pen/yLRPpKN

Answer 1

Instead of sending the id as a string in each function, just send the event like this onchange="setMenuValue(this)" then you can access whichever value and id you just sent depending on what you selected. Just check this working example.

Note: This example only addresses part of the issue

function setMenuValue(e) {
  // Get the selected option from the menu.
  var selectedOption = e.value;
  console.log("selected value= " + selectedOption);
  console.log("selected id= " + e.id);

  // Set the value of the "menuItem" variable to the value of the selected option.
  var menuItem = selectedOption;
}

<label for="label">Select a menu item:</label>
<select id="MenuOne" class="TestMenu" onchange="setMenuValue(this)">
  <option selected value="9999">Numbers</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>
<select id="MenuTwo" class="TestMenu" onchange="setMenuValue(this)">
  <option selected value="9999">Phonetics</option>
  <option value="alpha">Alpha</option>
  <option value="bravo">Bravo</option>
  <option value="charlie">Charlie</option>
</select>
<select id="MenuThree" class="TestMenu" onchange="setMenuValue(this)">
  <option selected value="9999">RGB</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<select id="MenuFour" class="TestMenu" onchange="setMenuValue(this)">
  <option selected value="9999">Pets</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="hamster">Hamster</option>
</select>
<div id="label"></div>