Почему при клике на кнопку-гамбургер в консоли увеличивается количество ошибок?

Question

[Павел]

В мобильной версии сайта кликаю на "гамбургер-меню". В консоли появляются ошибки:

"main.js:14 Uncaught TypeError: $ is not a function", "Uncaught TypeError: menu.slideToggle(...) is not a function", "Uncaught TypeError: $(...).mask is not a function" и т.д

При этом меню работает нормально.
С каждым повторным кликом на кнопку количество ошибок увеличивается.
Прикрепляю скрин ниже.

Из за чего такое может быть и как исправить данные ошибки?
Спасибо

Comments

[Dima Polos]

Код напишите

[tyzberd]

потому что при клике срабатывает код с ошибками. А рабочий код меню может быть в другом месте

[Павел]

Dima Polos,

$(document).ready(function($) {
				var menuBtn = $('.top-nav_btn');
				var menu = $('.top-nav_menu');
				var sidebarBtn = $('.left-sidebar_btn');
				var sidebarmenu = $('.left-sidebar_menu');
				
				menuBtn.on('click', function(event){
					event.preventDefault();
					menu.slideToggle(300)('top-nav_menu__active');
				});
				// resize screen
				$(window).resize(function($) {  
					var menuActive = jQuery('top-nav_menu__active'); 
				if ($(window).width() > 991 ) { 
					menuActive.removeAttr('style'); 
				} 
			});		
				// sidebar
				sidebarBtn.on('click', function(event){
					event.preventDefault();
					sidebarmenu.slideToggle(300)('left-sidebar_menu__active');
				});	
				// slider
					$('.directions-slider').slick({
				arrows: false,
				dots: true,
				slidesToShow: 4,
				slidesToScroll: 1,
					responsive: [
				    {
				      breakpoint: 768,
				      settings: {
				        slidesToShow: 1,
				        slidesToScroll: 1,
				      }
				    },
				    {
				      breakpoint: 1200,
				      settings: {
				        slidesToShow: 3,
				        slidesToScroll: 1,
				      }
				    }
				  ]
				}); 
				// calc-range
				var elem = document.querySelector('.calc-range');
				var init = new Powerange(elem, { min: 100000, max: 3000000, start: 128, hideRange: true, step: 100000 });
				
				var per, month, result, total, monthly;
				var money = +$('.calc-range').val();

			  $('input[name="programms"]').on('change', function(event) {
			  	month = +$(this).attr('data-month');
			  	per = +$(this).attr('data-per'); 
			  	result = Math.round(per / 12 * month * money);
			  	total = result + money;
			  	monthly = parseInt(result / month);
			  	$('#total').text(total.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));
			  	$('.calc-monthly span').text(monthly.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));
			  	$('#month').text(month);
			  });

			 $('.calc-range').on('change', function(event){
				$('.calc-summ_invest_num span').text($(this).val().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')); 
				var radio = $('input[name="programms"]:checked');
				money = +$(this).val()
			  	month = +radio.attr('data-month');
			  	per = +radio.attr('data-per'); 
			  	result = Math.round(per / 12 * month * money);
			  	total = result + money;
			  	monthly = parseInt(result / month);
			  	$('#total').text(total.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));
			  	$('.calc-monthly span').text(monthly.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));
			console.log(per);
			console.log(month);
			}); 
		}); 
		// modal window
				$('.modal-btn').on('click', function(event){
				event.preventDefault();
				$('.modal').fadeIn();
			});
			$('.close').on('click', function(event){
				event.preventDefault();
				$('.modal').fadeOut(); 
			});
			
		// mask input
     jQuery(function($){
		   $(".mask").mask("[phone]");
		});

файл js со всеми скриптами

Answer 1

[Алексей Скляров]

Вам пишут же, что $ не функция. Где-то вы подключаете сначала скрипт. потом jquery, надо наоборот.