In my form I have two select inputs, in which the second select changing its values depending on the first select input.

However, when selecting a value in the first select input, the second select input fails to update its values accordingly. I get the error:

Uncaught TypeError: Cannot read property 'options' of null
    at newchangeCategory (managefood:340)
    at HTMLSelectElement.onchange (managefood:273)

Below is the code for the form, as well as the script that changes the second select input based on what is given in the first. I've mented in the code which lines the error above refer to.

<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                     <span aria-hidden="true">&times;</span>
                    </button>
        <h3 class="modal-title" id="newfoodLabel">New Food</h3>
        <br>
        <div>
          <div class="col-sm-12">
            <label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
            <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> //line 273
                                <option value="" disabled selected hidden>Select a category</option>
                                <option value="Fruit">Fruit</option>
                                <option value="Vegetable">Vegetable</option>
                            </select>
          </div>
          <div class="col-sm-12">
            <label for="type" id="newtypeLabel" style="text-align: left">Type</label>
            <select name="type" id="newtype" class="form-control"></select>
          </div>

          //this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select.
          <script type="text/javascript">
            var typeOptions = {};
            typeOptions['Fruit'] = [
              'Apple',
              'Pear',
              'Banana',
              'Plum',
              'Peach'
            ];
            typeOptions['Vegetable'] = [
              'Broccoli',
              'Carrot',
              'Pumpkin'
            ];

            function newchangeCategory() {
              var categoryChoice = document.getElementById('newcategory');
              var typeChoice = document.getElementById('newtype');
              var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
              console.log(selectedCategoryChoice);
              while (typeChoice.options.length) {
                typeChoice.remove(0);
              }
              var typesAvailable = typeOptions[selectedCategoryChoice];
              if (typesAvailable) {
                var i;
                for (i = 0; i < typesAvailable.length; i++) {
                  var type = new Option(typesAvailable[i], typesAvailable[i]);
                  typeChoice.options.add(type);
                }
              }
            };
          </script>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                    </button>
        <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                    </button>
      </div>
    </div>
  </div>
</div>

In my form I have two select inputs, in which the second select changing its values depending on the first select input.

However, when selecting a value in the first select input, the second select input fails to update its values accordingly. I get the error:

Uncaught TypeError: Cannot read property 'options' of null
    at newchangeCategory (managefood:340)
    at HTMLSelectElement.onchange (managefood:273)

Below is the code for the form, as well as the script that changes the second select input based on what is given in the first. I've mented in the code which lines the error above refer to.

<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                     <span aria-hidden="true">&times;</span>
                    </button>
        <h3 class="modal-title" id="newfoodLabel">New Food</h3>
        <br>
        <div>
          <div class="col-sm-12">
            <label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
            <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> //line 273
                                <option value="" disabled selected hidden>Select a category</option>
                                <option value="Fruit">Fruit</option>
                                <option value="Vegetable">Vegetable</option>
                            </select>
          </div>
          <div class="col-sm-12">
            <label for="type" id="newtypeLabel" style="text-align: left">Type</label>
            <select name="type" id="newtype" class="form-control"></select>
          </div>

          //this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select.
          <script type="text/javascript">
            var typeOptions = {};
            typeOptions['Fruit'] = [
              'Apple',
              'Pear',
              'Banana',
              'Plum',
              'Peach'
            ];
            typeOptions['Vegetable'] = [
              'Broccoli',
              'Carrot',
              'Pumpkin'
            ];

            function newchangeCategory() {
              var categoryChoice = document.getElementById('newcategory');
              var typeChoice = document.getElementById('newtype');
              var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
              console.log(selectedCategoryChoice);
              while (typeChoice.options.length) {
                typeChoice.remove(0);
              }
              var typesAvailable = typeOptions[selectedCategoryChoice];
              if (typesAvailable) {
                var i;
                for (i = 0; i < typesAvailable.length; i++) {
                  var type = new Option(typesAvailable[i], typesAvailable[i]);
                  typeChoice.options.add(type);
                }
              }
            };
          </script>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                    </button>
        <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                    </button>
      </div>
    </div>
  </div>
</div>

• javascript
• jquery
• html
• forms

• I think because typeChoice has no option so typeChoice.options.length causes error. – Ali Sheikhpour Commented Jun 13, 2017 at 8:30

2 Answers 2

The reason why it was not working is that of one small spelling mistake, please have a look at the category id given in HTML and used by you in the script

var categoryChoice = document.getElementById('newCategory');

Please use newCategory with capital "C".

Probleme in capitalized character , change newcategory by newCategory in the js code : so the line would be var categoryChoice = document.getElementById('newCategory');

working snippet :

var typeOptions = {};
typeOptions['Fruit'] = [
  'Apple',
  'Pear',
  'Banana',
  'Plum',
  'Peach'
];
typeOptions['Vegetable'] = [
  'Broccoli',
  'Carrot',
  'Pumpkin'
];

function newchangeCategory() {
  //here you make the change newCategory iinstead of newcategory
  var categoryChoice = document.getElementById('newCategory');
  var typeChoice = document.getElementById('newtype');
  var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340
  console.log(selectedCategoryChoice);
  while (typeChoice.options.length) {
    typeChoice.remove(0);
  }
  var typesAvailable = typeOptions[selectedCategoryChoice];
  if (typesAvailable) {
    var i;
    for (i = 0; i < typesAvailable.length; i++) {
      var type = new Option(typesAvailable[i], typesAvailable[i]);
      typeChoice.options.add(type);
    }
  }
};

<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                 <span aria-hidden="true">&times;</span>
                </button>
        <h3 class="modal-title" id="newfoodLabel">New Food</h3>
        <br>
        <div>
          <div class="col-sm-12">
            <label for="category" id="newCategoryLabel" style="text-align: left">Category</label>
            <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> //line 273
                            <option value="" disabled selected hidden>Select a category</option>
                            <option value="Fruit">Fruit</option>
                            <option value="Vegetable">Vegetable</option>
                        </select>
          </div>
          <div class="col-sm-12">
            <label for="type" id="newtypeLabel" style="text-align: left">Type</label>
            <select name="type" id="newtype" class="form-control"></select>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                </button>
        <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                </button>
      </div>
    </div>
  </div>
</div>