Javascript 未捕获的类型错误：无法读取 null 的属性(读取‘选项’)但 Select 菜单选项不为空

下面的JS函数应该将所选下拉菜单中的值赋给变量"menuItem"，并在用户更改其中一个菜单时重置其他三个菜单.

然而，[当我在CodePen中运行它时][1]，我一直收到以下错误:

未捕获的TypeError:无法读取Null的属性(正在读取‘Options’) 在[…行]3

我查找了该错误的含义，并将其理解为SELECT菜单中的选项没有价值.但测试菜单中的所有选项都有值.

有没有人能解释一下(不用太过技术性)为什么会出现这个错误，并建议修复？

<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