JSファイルが参照できない。


画面のボタンを押して「JS練習.js」を参照して処理を走らせたいのですが上手くいきません。  
どう修正したらいいのでしょうか。  
htmlファイルと同じフォルダの中に「JS練習.js」は入れてあります。

[code]

    【htmlファイル】
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>あいうえお商店</title>
    
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
      <script type="text/javascript" src="JS練習.js"></script>
    
      <body>
       <div class="container">
        <header>
          <p>あいうえお</p>
        </header>
        <a class="btn btn-primary btn-block" id ="target" href="#">Aボタン</a>
        <a class="btn btn-primary btn-block" id ="abc" href="#">Bボタン</a>
      </div>
    </body>
    </html>
    
    【JS練習.js】
    $('#target').click(function() {
        var num ="12345";
        $("#abc").click();
        $(this).slideUp();
    });
    $("#abc").click(function() {
        $(this).slideUp();
    });
    
[/code]




jqueryが動作準備できてからJS練習.jsの内容が動くように$(function (){ }); で囲む必要があります。

[code]

    $(function (){
        $('#target').click(function() {
            var num ="12345";
            $("#abc").click();
            $(this).slideUp();
        });
        $("#abc").click(function() {
            $(this).slideUp();
        });
    });
    
[/code]




jqueryが動作準備できてからJS練習.jsの内容が動くように$(function (){ }); で囲む必要があります。

[code]

    $(function (){
        $('#target').click(function() {
            var num ="12345";
            $("#abc").click();
            $(this).slideUp();
        });
        $("#abc").click(function() {
            $(this).slideUp();
        });
    });
    
[/code]

