Question 137277 in Html Question posted in
Some basic documentation can be found here.

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

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;

  // Reset the other three menus so their option changes to the option with the "selected" attribute.
  for (var i = 0; i < 3; i++) {
    var otherMenu = document.getElementById("Menu" + (i + 1));
    otherMenu.options[0].selected = true;
  }

  // Update the text of the label to reflect the selected menu item.
  var label = document.getElementById("label");
  label.textContent = menuItem;
}


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

2

Answers


  1. 0

    In the html you have the menu ID’s: MenuOne, MenuTwo and MenuThree.
    In the JS you are getting the menus with ID’s: Menu1, Menu2 and Menu3
    Because those don’t exist, otherMenu is null and you’re trying to get the options of null. That’s the error

    var otherMenu = document.getElementById("Menu" + (i + 1));
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search