環境前提
jquery ver3.4.1
html5
css3
実装したい内容
html内のbutton要素であるカウントという文字がクリックされた際にh1要素の0という数字がインクリメントされ、増えていくという機能を実装。
確認したエラー
Chromeの開発者ツールで確認しましたが、特にエラーメッセージが出ませんでした
また、jqueryの読み込みが完了していることは
return function(){}の中にあるconsole.log()が undefined ではなく、そもそも確認できなかったので
return functionが発動していないのだと思いますが、どこを修正すればいいのか分からない状況です。
ソースコード
<html lang="ja"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha384vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"> </script><head> <meta charset="utf-8"> <title>クロージャ</title>
<body style="text-align:center; margin: 100px; "> <h1 class="js-set-count">0</h1> <button class="js-cal-count" style="padding: 15px; background: #333; border: none; color:black; background-color: blue"> カウント </button> </body> <script> //jqueryファイルが外部から読み込まれているかを確認 $(document).ready(function(){ alert("jQueryファイルの読み込み完了"); });</head>
</script> </html>//クロージャを使わずにwindow.cnt=0;と定義して処理を書くこともできるが、 //グローバル変数なので他の人が他のファイル上で書き換える可能性もあるのでやめた方が良い var counter = (function(){ var cnt = 0; console.log(cnt); //結果=>0 return function(){ return cnt +=1; console.log(cnt); //=>表示されなかった。undefinedではない }; }()); //ここの()は関数の定義と実行を一括で記述する簡単な方法 $('js-cal-count').on('click',function(){ //カウントという文字がクリックされたとき $('js-set-count').text(counter()); //.textの中でcounter()を使う }); console.log(counter); //=>f(){return cnt+=1; console.log(cnt); }
回答1件
あなたの回答
tips
プレビュー