Как сделать переход на страницу при выборе из списка?

У меня есть два списка, если человек выбирает баскетбол и историю, то при нажатие на кнопку происходит переход на эту странице и тд. Вот код:

<div class="row mb-2">
                                     <div class="col-sm-12 col-md-6 mb-3 mb-lg-0 col-lg-4">
                                         <select name="" id="mySelect_1" class="form-control custom-select">
                                             <option value="basket" id="basket">Баскетбол</option>
                                             <option value="gymnastic" id="gymnastic">Гімнастика</option>
                                            <!--<option value="tennis" id="tennis">Теніс</option>-->
                                             <option value="wrestling" id="wrestlling">Боротьба</option>
                                             <option value="karate" id="karate">Карате</option>
                                             <!--<option value="volleyball" id="volleyball">Волейбол</option>-->
                                             <!--<option value="pankration" id="pankration">Панкратіон</option>-->
                                         </select>
                                     </div>
                                     <div class="col-sm-12 col-md-6 mb-3 mb-lg-0 col-lg-5">
                                         <select name="" id="mySelect_2" class="form-control custom-select">
                                             <option value="about_" id="history">Історія</option>
                                             <option value="for_parents_"  id="for_parents">Для батьків</option>
                                             <option value="calendar_" id="calendar">Календар змагань</option>
                                             <option value="results_" id="results">Результати змагань</option>
                                         </select>
                                     </div>
                                 </div>
<script>
     function click() {
         if (document.getElementById('#basket') && document.getElementById('#history')) {
             document.location.href = 'about_basket.html';
         }
         else if (document.querySelector("#basket") && document.querySelector("#for_parents")) {
             document.location.href = "for_parents_basket.html"
         }
         else if (document.querySelector("#basket") && document.querySelector("#calendar")) {
             document.location.href = "calendar_basket.html"
         }
         else {
             document.location.href = "about_tennis.html"
         }
     }
 </script>

Ответы (1 шт):

Автор решения: Nikita

Функция click написана неправильно:

  1. document.querySelector и document.getElementById возвращают элемент, а не то, выбран ли он на данный момент.

  2. Вместо & нужно использовать &&, & это бинарное И, а && - логическое.

Правильный вариант функции:

function click(){
    let sel1 = document.querySelector('#mySelect_1'), sel2 = document.querySelector('#mySelect_2');
    let val1 = sel1.options[sel1.selectedIndex].value;
    let val2 = sel2.options[sel2.selectedIndex].value;
    location.href = val2+val1+'.html';
}
→ Ссылка