0

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

【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();
});

2 件の回答 2

1

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

$(function (){
    $('#target').click(function() {
        var num ="12345";
        $("#abc").click();
        $(this).slideUp();
    });
    $("#abc").click(function() {
        $(this).slideUp();
    });
});
2
  • 上記の通り修正したらJSファイルが参照されました。ありがとうございました。
    – kazu
    2017年5月27日 6:39
  • 1
    補足です。 JS練習.jsは読み込まれていたけど、jqueryの初期化より前に動いてしまい ”$”がjqueryとして使用できない状態で先に動いてしまった。です。
    – yyz
    2017年5月27日 6:46
0

htmlのidに不要なスペースがありますので、まずはそこから取り除きましょう。

例)
id ="target" → id="target"

それでも解決しない場合は、日本語でのファイル名をアルファベットに変えてみてください。
基本的に、日本語でのファイルはサーバー環境以外にも、依存性が高いため、認識されない場合があります。
必要じゃない限り、英語などの単語を利用して、アルファベットでファイル名を指定しましょう。

1
  • 上記の通り、htmlのidに不要なスペース削除、ファイル名変更してみましたが修正してみましたが結果は変わっていない状況です。他に原因がありそうです。
    – kazu
    2017年5月27日 6:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。