メソッドを呼び出すことでボタンテキストを取得できない

Question

このデモを見て、#add-pointボタンのテキストが表示されない理由を教えてください。

$("#add-point").on("click", function(){ 
 
    activatePointTool(); 
 
}); 
 

 
function activatePointTool() { 
 
    var tool = $(this).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 1

あなたはどんな「これを」持っていませんあなたの機能の中で。関数に渡すか、オンクリック機能でコードを実行する必要があります。 JSでコーディングするときにこれをマスターすることは、これが本当に重要な機能です。

参考：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

$("#add-point").on("click", function(){ 
 
    activatePointTool(this); 
 
}); 
 

 
function activatePointTool(el) { 
 
    var tool = $(el).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 2

あなたはそうthisはwindowオブジェクトを参照するので、関数にターゲット要素に合格する必要があります。

$("#add-point").on("click", function(){ 
    activatePointTool(this); 
}); 

function activatePointTool(el) { 
    var tool = $(el).text().toUpperCase().replace(/ /g, "_"); 
    console.log(tool); 
} 

Answer 3

が、なぜ私が＃アドオンポイントボタンのテキストを取得していないのですか？

activatePointTool();は、単に別の関数呼び出しを意味します。
イベントハンドラ（activatePointTool）でターゲット要素（$("#add-point")）がにバインドされていませんでした（）。
は、次のアプローチを使用します。

$("#add-point").on("click", activatePointTool); 
 

 
function activatePointTool() { 
 
    var tool = $(this).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 4

あなたはこのコンテキストを持っている問題は、「ウィンドウ」です。だから、あなたが何をする必要があるかのどちらかであるあなたがこの方法に

$("#add-point").on("click", function(){ 
 
    activatePointTool.call(this); 
 
}); 
 

 
function activatePointTool() { 
 
    var tool = $(this).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>

を呼び出すか、単に閉鎖

$("#add-point").on("click", activatePointTool); 
 

 
function activatePointTool() { 
 
    var tool = $(this).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>

Answer 5

もしなくてメソッドを呼び出す方法を変更その機能が実行するのはアクションを処理することだけです。 clickハンドラの中に目的のアクションを含めるだけです。ここでは、 'this'はクリックされたボタンを指し、要素を別の関数に渡す必要はありません。

$("#add-point").on("click", function(){ 
 
    var tool = $(this).text().toUpperCase().replace(/ /g, "_"); 
 
    console.log(tool); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-point" class="btn btn-default btn-tool">Point</button>