I am working on this demo. Why am I not getting the text of the #add-point
button?
$("#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>
Advertisement
Answer
You don’t have any “this” in your function. You either need to pass it to your function or execute your code in the on click function. The this is a really important feature to master when coding in JS.
Reference: 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>