Q&A
「コード」という文字が実際のコード内にないのでしたら削っておいてください。
javascript で下記のようにクラス構文を使用し作成しました。CLICK（）からthis.aaa()のメソッドを起動しようとしましたが、起動しません。
<html> <head> <title>15 puzzle</title> <meta charset="UTF-8"> <style> .tile { width: 70px; height: 70px; border: 1px solid blue; text-align: center; font-size: 50px; box-shadow: rgb(128, 128, 128) 5px 5px; } </style> <script> "use strict"; // 広域変数 let tiles = []; let cBanmen = null; class Banmen{ constructor(table){ this.table = document.getElementById(table); let tr = document.createElement("tr"); let index = 1; tr.className = "tile"; tr.index = index; tr.textContent = index ; tr.onclick = this.click; tiles.push(tr); this.table.appendChild(tr); } aaa(){ alert(1234); } bbb(){ this.aaa(); } click(){ cBanmen.aaa(); this.aaa(); } } // 初期化関数 function init() { cBanmen = new Banmen("table"); } function bbb() { cBanmen.aaa(); } </script> </head> <body onload="init()"> <table id="table"></table> <input type="button" value="test" onclick="cBanmen.bbb()"> </body> </html>
this.aaa()は 「 Uncaught TypeError: this.aaa is not a function 」
とかえってきて、うまくうごきません。メソッドでなく、functionをつかった場合では普通にうごきます。これはなぜかわかりません。
同コードで試しましたがボタンクリックで「1234」と出力されました。
OSとブラウザとバージョンは何でしょうか。
あぁテーブルのclickですかね。。。
再現手順記載してほしいです。
click(){}に２つ並べているのはどういう理由でしょうか。
お世話になります。回答ありがとうございました。
再現手順を記載せず、申し訳ありまんでした。
クローム バージョン: 96.0.4664.110（Official Build） （64 ビット）
OSは ＷＩＮＤＯＷＳです。
画面上で１という文字をクリックすると動くように考えてみたのですが、
click(){
cBanmen.aaa();
this.aaa();
で newしたあとの ｃＢａｎmenは動くのに、this。だとエラーになるのでその疑問でした。
質問は編集できますので適宜調整してください
ｸﾛｰﾑのﾃﾞﾊﾞｯｸﾞﾂｰﾙで確認してみましたが、cBanmenには prototypeでaaa()がついていたので、動いたのはわかりましたが、this.だとみあたりませんでした。 NEWしてインスタンス化しないとﾒｿｯﾄﾞが実装されないのでないかと考察したのですが、いかがでしょうか？
回答1件
0
ベストアンサー
js
1tr.onclick = this.click;
onイベント名 で登録した関数内では、this がイベント対象の要素になります。この挙動を変えるにはbind()やアロー関数でthisを固定します。
js
1tr.onclick = this.click.bind(this);
js
1tr.onclick = () => { this.click() };
投稿2022/01/04 15:02
総合スコア20841
あなたの回答
tips
プレビュー
