Почему в синтаксически правильном JavaScript / jQuery выполнение никогда не выходит за рамки `$ ('form'). Submit (function (event) {`?

У меня есть JavaScript / jQuery, который я пытаюсь запустить локально для тестирования. Это начинается $( 'form' ).submit(function(event) {, но никогда не выходит за рамки этого. (Я поставил console.logсразу после этой строки. Он никогда не выполняется. Я знаю, что js выполняется, потому что выполняется console.logперед этой строкой.) Средство проверки синтаксиса не выдает ошибок.

JavaScript:

$( 'form' ).submit(function(event) {
 const SelectElms = $( 'select' );
  var  a          = [];
  var  selectVals = Array.from(SelectElms).reduce((a,n) => {
    if(n.value && n.value !== 'unsure' && n.value !== 'not attend') {
      a.push( {
                 'index': n,
                 'room': n.value
              }
            );
    }  // end if
    return a;
  });  //  end def arrow fn & reduce
  event.preventDefault();
});  //  end def anonymous fn & submit

В приведенном ниже фрагменте форма отображается правильно, но при отправке консоль на секунду отображает сообщение об ошибке, а затем исчезает. Он отображается слишком мало времени, чтобы его читать. Затем в области результатов появляется сообщение об ошибке «Пользовательский модуль ошибок не распознает эту ошибку».

Также, если хотите, проверьте правильность остальных js. Я хочу создать массив объектов, по одному объекту на <select>элемент формы. У каждого объекта должна быть позиция индекса и значение <select>элемента ({'index': n, 'room': n.value}).

В своем ответе на этот ранее вопрос , MisterJojo сделал что - то подобное , которые я пытался запустить его локально. Хотя он выполняется в его фрагменте, когда я запускаю его локально, он выдает ошибку TypeError, которую querySelector('#My-Form')возвращает null. Я скопировал и вставил его js и HTML. Форма есть id="My-Form"в <form>теге. Кроме того, средство проверки синтаксиса возвращает несколько ошибок. Итак, я не смог реализовать его решение или адаптировать его к этой проблеме. Примечание: он запускается в этом jsfiddle .

Большое спасибо за Вашу помощь.

Фрагмент:

$( 'form' ).submit(function(event) {
 const SelectElms = $( 'select' );
  var  a          = [];
  var  selectVals = Array.from(SelectElms).reduce((a,n) => {
    if(n.value && n.value !== 'unsure' && n.value !== 'not attend') {
      a.push( {
                 'index': n,
                 'room': n.value
              }
            );
    }  // end if
    return a;
  });  //  end def arrow fn & reduce
  event.preventDefault();
});  //  end def anonymous fn & submit

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select class="select" name="select 0830">
      <option value="unsure">unsure</option>
      <option value="attend">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select class="select" name="select 0900">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select class="select" name="select 1030">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>