Javascript не загружается на сайт

Question

У меня есть кнопка на моем сайте, которая при нажатии открывается всплывающее меню. Я правильно включил JS-файл, но он не работает. Произошла ошибка с файлом JS или HTML. Файлы выглядят следующим образом.

mainfile.js

var $blob = $('<blob/>'); 
    var $blob2 = $('<blob class="blob2"/>'); 


    $('#sidebarToggle').on('click', function() { 
    $(this).closest('.menu').toggleClass('open'); 
    $('.page').toggleClass('open'); 

    }); 



    $('.link').on('mouseleave touchend', function(e) { 
    //e.preventDefault(); 
    $blob.css({ 
     top: e.offsetY + 'px', 
     left: e.offsetX + 'px' 
    }); 
    $blob.removeClass('scale'); 
    }); 
    $('.link').on('mousemove touchmove', function(e) { 
    e.preventDefault(); 
    $(this).find('blob').css({ 
     top: e.offsetY + 'px', 
     left: e.offsetX + 'px' 
    }); 
    }); 
    $('.sidebar').on('mousemove touchmove', function(e) { 
    e.preventDefault(); 
    }); 
    $('.link').on('mouseenter touchstart', function(e) { 
    $blob.css({ 
     top: e.offsetY + 'px', 
     left: e.offsetX + 'px' 
    }); 
    $(this).append($blob); 
    setTimeout(function() { 
     $blob.addClass('scale'); 
    }, 20); 
    }); 
    $('.link').on('click', function(e) { 
    e.preventDefault(); 
    $blob2.css({ 
     top: e.offsetY + 'px', 
     left: e.offsetX + 'px' 
    }); 
    $blob2.removeClass('scale'); 
    $(this).append($blob2); 
    setTimeout(function() { 
     $blob2.addClass('scale'); 
    }, 20); 
    var target = $(this).attr('href'); 
    var scroll = $(target)[0].offsetTop - 70; 
    $('html, body').animate({ 
     scrollTop: scroll 
    }); 

    }); 

HTML Button Элемент:

<script src="js/mainfile.js"></script> 
<div class="sidebar"> 
    <div class="menu"> 
    <div id="sidebarToggle" class="button"><span></span><span></span></div> 
    <ul class="morpher"> 
     <li class="item"><a href="#" class="link"><span>Resume</span></a></li> 
     <li class="item"><a href="#about_me" class="link"><span>About Me</span></a></li> 
     <li class="item"><a href="#my_experience" class="link"><span>my experience</span></a></li> 
     <li class="item"><a href="#my_projects" class="link"><span>my projects</span></a></li> 
     <li class="item"><a href="#social" class="link"><span>social</span></a></li> 
     <li class="item"><a href="#contact" class="link"><span>contact</span></a></li> 
    </ul> 
    </div> 
</div> 

Answer 1

В головном теге HTML добавить эту строку кода

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

это добавит JQuery

Answer 2

Вы должны всегда используйте метод возврата, если вы собираетесь использовать CDN, если CDN недоступен для библиотеки. Это означает, что вы загружаете копию jQuery и сохраняете ее локально. Вы можете использовать этот код -

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') { 
    document.write(unescape("%3Cscript src='path/to/jquery-1.11.1.min.js' 
type='text/javascript'%3E%3C/script%3E")); 
} 
</script>