機能が定義されていませんJavaScript（基本）

-1

この種の質問をお手伝いして申し訳ありませんが、私は問題の解決策を見出そうとしましたが、機能が定義されていませんJavaScript（基本）

私はこれを行うことによって、他の要素をクリックすることで、要素のクラスを切り替えしようとしています：

var myCanvas = document.querySelector('main'); 

function btOne() { 
    myCanvas.classList.toggle("one"); 
}

私はにクラスを追加したいdiv要素を定義し、機能を定義しました。

<main></main> 
<div class="pickers"> 
    <div class="pick one" onclick="btOne()"></div> 
</div>

私はdivをクリックすると関数が定義されていないと言います。 私は何が間違っているのか分からないようです。私のDEMOを確認して、実際に何が起こっているのかを確認してください。

私はjQueryなどのライブラリを使用しないようにしています。

2016-04-18 St Klauz

さて、何の*はそれに*間違っていますか？それは何をしますか、それは何をしませんか？あなたのコンソールにエラーメッセージがありますか？ – deceze

私はdivをクリックすると関数が定義されていないと言います。 –

jQueryは「javascriptのみ」です。 –

JSFiddleはfunction btOneは、関数内でスコープされますonloadコールバックでコードをラップしている、とないは、暗黙的にグローバルスコープ。

あなたはグローバルスコープで利用可能なbtOneを持っているしたい場合は、明示的に割り当てる必要があります。

window.btOne = btOne;

2016-04-18 15:58:30 zzzzBov

あなたはなぜ地球上でコードの編集を行う必要はないと思いますか？コードを本体の底に置くだけで動作します。ロードタイプをnowrap-body –

@Pamblamに変更すると、正確なコードが動作しますが、突然突然破損する暗黙的な動作に頼るよりも、インテントとポータブルで明示的である方が良いです。 – zzzzBov

@Pamblamなど、コードにはさらに多くの問題があります。インラインイベントハンドラを使用することは悪い考えですが、この問題は、欠落しているグローバル参照の問題を修正する方法でした。 – zzzzBov

答えて