0

私はjqueryとcanvasを使用して（一緒ではなく）少しコーディングをいじっています。

私は外部のjavascriptファイルを持っていて、その中には;が含まれています。

$(document).ready(function() {
/*
    NAME CHOOSER
*/
var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy',];
var rosie = ['Mum',];
var prev;
$('button').click(function() {
    prev = $('h2').text();
    $('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
});
});

また、canvas要素用のインラインJavaScriptもあります。

<script>
var canvas = document.getElementById('draw');
if(canvas.getContext) {
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'red';
 ctx.fillRect(0, 0, 800, 500);
}
</script>

キャンバスにインラインJavaScriptを使用し、jqueryに外部ファイルを使用して分離すると、すべてが正常に機能し、期待どおりに機能します。

インラインキャンバスJavaScriptを外部ファイルに追加すると、canvas要素は機能しませんが、jqueryは機能します。外部のjavascriptが終了bodyタグの直前にリンクされているため、javascriptはcanvas要素の後に読み込まれます。さらに、外部ファイルからすべてのjqueryを削除すると、canvas要素が再び機能し始めます。

どうしてこれなの？

ありがとう

編集

また、jquerys document ready関数の内側と外側にキャンバスコードを配置しようとしましたが、まだ機能していません。私はキャンバスコードを無名関数でラップしましたが、まだ役に立ちません。また、以下のようにjquery自体でキャンバス要素を選択しようとしました。

var canvas = $('canvas')[0];

しかし、それでも知りたくありません。すべてのjqueryの前にキャンバスコードを配置すると、キャンバスコードが実行されますが、jqueryは実行されません。私は本当に困惑しています！それを分離しておくのは面倒ではありませんが、なぜそれが起こっているのか知りたいです。

再度、感謝します。

4

2 に答える 2

1

ブラウザ コンソールを使用すると、この単純な問題に気付くことがあります。それでおしまい！を押してコンソールを開くことができますCtrl+Shift+J：

ホームページ:

エラー:Uncaught ReferenceError: $ is not defined
解決策: ソースに jQuery をリンクする

namechooser ページで:

エラー：Uncaught TypeError: Cannot read property 'getContext' of null

問題：

div をキャンバスとして操作しようとしていますが、div要素のコンテキストを取得できません。これはあなたのHTMLです：

<div id="wrap">
   <h1>PORTFOLIO PROJECT <a href="/">:)</a></h1>
   <button>Click here to generate a company name!</button>
</div>

解決：

<div>の変更<canvas>

このような将来の問題を回避するにはどうすればよいですか?

ブラウザ コンソールを使用します。それだけです。

于 2013-02-21T06:50:34.810 に答える
0

上記のコードを組み合わせると、次のようになります: (完全なコンテキストについては、私の jsFiddle を参照してください: http://jsfiddle.net/mori57/TqamB/ )

$(document).ready(function () {
    /*
    NAME CHOOSER
*/
    var carl = ['Sha', 'Shads', 'Cai', 'Moon', 'Sun', 'Staffy'];
    var rosie = ['Mum'];
    var prev;
    $('button').click(function () {
        prev = $('h2').text();
        $('h2').empty().text(carl[Math.floor(Math.random() * carl.length)] + rosie[Math.floor(Math.random() * rosie.length)]).after('<p>' + prev + '</p>');
    });

    var canvas = document.getElementById('draw');
    if(canvas.getContext) {
     var ctx = canvas.getContext('2d');
     ctx.fillStyle = 'red';
     ctx.fillRect(0, 0, 800, 500);
    }
});

そして、jsFiddle のコンテキスト内で実行すると、これは完全に機能します。

つまり、2 つのスクリプトが適切に結合されていないか (たとえば、キャンバスをドキュメント対応ブロックの外に置いているか、何らかの理由で右中括弧が欠落している)、スクリプト ファイルまたはマークアップに何か問題があります。

于 2013-02-21T06:25:06.590 に答える