Q&A
コードは全体を提示してください。
jsの読み込みやbodyも含めた全てです
前提・実現したいこと
ボタンを押したとき、そのボタンのvalueを取得しコンソールに出力したい。
発生している問題・エラーメッセージ
ボタンを押すと以下のエラーメッセージが出て動作しない。
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at S.fn.init.val (jquery.min.js:2) at HTMLInputElement.<anonymous> (main.js:2) at HTMLInputElement.dispatch (jquery.min.js:2) at HTMLInputElement.v.handle (jquery.min.js:2)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>practice</title> 6 <link rel="stylesheet" href="main.css" media="print" onload="this.media='all'"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 8 </head> 9 <body> 10 <header> 11 <h1>practice</h1> 12 </header> 13 <input type="button" id="btn" text="押してね" value="ボタンだよ"> 14 <script type="text/javascript" src="main.js"></script> 15 </body> 16 17</html>
JavaScript
1$(".btn").on("click",()=>{ 2 const val = $(this).val(); 3 console.log(val); 4});
https://qiita.com/noqua/items/b81222c0352aecaf31ea
を見ても$(セレクタ).val()で取得できるとしか書いておらず、何が原因かわかりません。
ご回答よろしくお願いいたします。
回答2件
0
ベストアンサー
jsでarrow関数を使っているためthisが参照できないエラーになるので、=>の部分をfunctionに修正すれば問題なく動くと思います。
- 動く参考コード
js
1$('.btn').on("click", function(){ 2 const val = $(this).val(); 3 console.log(val); 4})
エラー内容についてと、arrow関数についての参考リンクもお送りします。
投稿2020/05/13 08:42
総合スコア400
0
これだと（アロー関数を使いたいなら）イベントリスナーを使わないとオブジェクトを取得できないよ。
JavaScript
1$(".btn").on("click",event =>{ 2 const val = $(event.currentTarget).val(); 3 console.log(val); 4});
投稿2020/05/13 09:08
編集2020/05/13 09:13
総合スコア349
あなたの回答
tips
プレビュー
