HTML Javascript Button Alert Onlcick

-1

シンプルなクロムエクステンションの作成に取り組んでいるので、JSはそれ自身の.jsドキュメントに書き込まれなければなりません。HTML Javascript Button Alert Onlcick

options.html

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Proxy Extension</title> 
     <link rel="stylesheet" href="stylesheets/style.css"> 
     <script src = "jquery-3.2.1.min.js" type="text/javascript"></script> 
     <script src = "options.js"></script> 
    </head> 
    <body> 
     <div id="settings" align="center"> 
     <form> 
      <input type="text" class="info" id="Addy" placeholder="Address"> 
      <input type="number" class="info" id="Port" placeholder="Port" max="9999"> 
      <p></p> 
     </form> 
      <input type="button" id="box" value="Update"> 
     </div> 
    </body> 
</html>

options.js

$(document).ready(function(){ 
    $("#box").click(function(){ 
     alert("placeholder"); 
    }); 
});

機能は、超簡単なことになっています。ボタンを押します：アラートを取得します。問題は、私は警告を取得していないです。

出典

2017-07-12 Σqu

$(document).ready(function(){ $("#box").click(function(){ alert("placeholder"); }); });

... [ドキュメント]（HTTPSを読み取ります。 //api.jquery.com/click/）。コンソールのエラーがこの問題を警告していたはずです。 – epascarello

スクリプトの読み込みを再注文する必要があります。

スクリプトが実行されると実行されるため、options.jsファイルはjQueryライブラリをロードする前に実行されるため、$(document)行で失敗します。

devツールを開くと、コンソールログにエラーが表示されます。 options.js前にjQueryライブラリをインポートし、

Uncaught ReferenceError: $ is not defined

は、この問題を解決するには：

だから、あなたはおそらく、このコンソールのエラーを取得している

<script src="jquery-3.2.1.min.js" type="text/javascript"></script> 
<script src="options.js"></script>

出典

2017-07-12 01:16:25

これは、スクリプトの前にjqueryをロードする必要があるためです。

出典

2017-07-12 01:11:46

を使用しています。

<script src = "jquery-3.2.1.min.js"></script> 
<script src = "options.js"></script>

また、（.clickにoptions.jsコードを変更）は（.onclickない）jQueryのonclickを持たない

出典

2017-07-12 01:17:38 klemus

あなたはjQueryライブラリをインポートすることを意味します** BEFORE ** options.js –

HTML Javascript Button Alert Onlcick

答えて

関連する問題