Develop Reference

How to access function in click handler function?

I create this class using pure javascript:
var SelectFeature = /*#__PURE__*/(function (Select) {
function SelectFeature() {
Select.call(this, {
condition: ol.events.condition.click
});
}
this.on('select', function (e) {
//some logic
});
if (Select) SelectFeature.__proto__ = Select;
SelectFeature.prototype = Object.create(Select && Select.prototype);
SelectFeature.prototype.constructor = Select;
return SelectFeature;
}(ol.interaction.Select));
as you can see I pass ol.interaction.Select as a parameter to the class and using Select.call() the method in SelectFeature as a constructor.
Here is a description of ol.interaction.Select class.
The ol.interaction.The select class has a member who is called getFeatures().
I try to access this method when some DOM element is clicked(this block is inside SelectFeature class):
$("#popupFeat-closer").click(function () {
this.getFeatures();
});
The code above is fired when DOM element is clicked but, on this row:
this.getFeatures();
I get this error:
Uncaught TypeError: this.getFeatures is not a function
My question how can I access getFeatures function which is located in click event handler?

Like it is mention in the comments, you have a context problem. Almost every library or framework has a method to keep the context, in jQuery you can achieve this with proxy method. Something like this should work,
$("#popupFeat-closer").click($.proxy(function () {
this.getFeatures();
}), this);
I would say that is always good to use the library/framework way of solving these, but the "old" way works too,
var self = this;
$("#popupFeat-closer").click(function () {
self.getFeatures();
});
jQuery Docs - proxy

Detect when a function is getting called in JavaScript

There are several elements on HTML page which triggers a js function HardCoded().
I cannot modify HardCoded() function.
I want to run some custom js code after the HardCoded() function is getting called. How can I do that? Is there any handlers for js functions?
I'm building a chrome extension that's why I cannot modify page source code.
I have access to JQuery.
One way is to find all elements who are calling HardCoded() and attach events to those elements but I would like to avoid this method.

You could do something like this:
var oldFn = HardCoded;
window.HardCoded = function(){
var res = oldFn.apply(this, arguments);
// New Code ....
return res;
}
What this does is to create a reference to the HardCoded function, redefine this function and then call the old implementation using the previously created reference.

How to pass `$(this)` as parameter to a "callready" function in Javascript

The leanModal function triggers a modal with some parameters. One of this parameters is a function (ready) that will be executed once the Modal is open. The point is, I need to do some stuff inside that function (ready) just with the element (tag) which triggered the modal, so I need to pass $(this) as parameter to that function. The leanModal() function is provided by MaterializeCss which's the framework that I'm using.
I've been trying this, but thisTag is always undefined. I also have tried to pass directly $(this) to the function, but it also doesn't work at all, it's still undefined. So, how can I reach this?
$('.modal-trigger-editMedic').leanModal({
thisTag: $(this),
ready: function(thisTag){
var refereeNum = thisTag.siblings("[name*='refereeNumToEdit']" )[0].value;
$('#surname').val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});

Following the source code, .leanModal supports a ready function (which is triggered once the modal is visible) but doesn't bind or send the element which triggered the modal, the easiest way to fix this is to store a reference outside. To do so, you need to iterate over the triggers yourself instead of relying on that functionality of provided by this jQuery plugin.
Like so:
var $surname = $('#surname'); // you should store the selector as a reference
// outside the loop for better performance
$('.modal-trigger-editMedic').each(function() {
var $this = $(this); // this is the current item in the set of elements,
// therefore our trigger element
// EDIT: using var makes this a local variable
$this.leanModal({
ready: function() {
var refereeNum = $this.siblings("[name*='refereeNumToEdit']" )[0].value;
$surname.val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});
});

When you are inside the leanModal it becomes this. Try setting a var to $(this) and pass that through.
var that = $(this);
$('.modal-trigger-editMedic').leanModal({
thisTag: that,
ready: function(thisTag){
var refereeNum = thisTag.siblings("[name*='refereeNumToEdit']" )[0].value;
$('#surname').val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});

jquery Object has no method 'xyz'

var $content = $('#SomeDivContainingTwoImages');
$content.children().each(function(i){
$(this).showImage = showImageStatic;
$(this).showImage();
});
returns
Uncaught TypeError: Object #<Object> has no method 'showImage'
when run. This works outside of the jquery each iterator, ie if I just apply it to a single element. What's up?

You are re-creating a jQuery object with every call to $(this).
This should work:
$content.children().each(function(i) {
var $this = $(this);
$this.showImage = showImageStatic;
$this.showImage();
});
But I think that's not a very good way of handling it. You could call showImageStatic() directly:
showImageStatic.call($(this));

$(this) creates a new instance every time.
The second $(this) doesn't have the method you added to the first one.

I don't think that's the right way to add a function, you should do
$.fn.extend({ "showImage" : showImageStatic });
and it should allow you to call showImage() properly.

Javascript/jQuery object coding issue

So I have a newly created Javascript object called EditableObject in my custom .js file
function EditableObject(e, dv, i) {
this.element = e;
this.default_value = dv;
this.set = 0;
this.id = i;
alert(this.element.html());
this.element.click(function (event) {
alert(this.element.html());
});
}
In my main page, I have a div called "field" that has the text "yeah" in it like such:
<div id="field">yeah</div>
In the script portion of my main page, I've got:
var t = new EditableObject($("#field"), "value", 1);
When the page loads, there is an alert box that says "yeah". But when I click on the div, I get an error saying that "this.element is undefined". Why is this happening?

Inside your click handler, this refers to a different scope (depending on browser, it'll be the event object or the current function). You need a closure to access parent scope's this:
var self = this;
this.element.click(function (event) {
alert(self.element.html());
});

The thing with this is that it differs in each function depending on the context. In jQuery bind functions, it is the element itself so the most straight-forward solution is:
this.element.click(function (event) {
alert($(this).html());
// this is element, $(this) is jQuery object containing element
});
So currently, this refers to the element, which differs from e.g. the line
this.id = i;
where it refers to the instance of EditableObject, because there you use this in a different function.

The this in your click function refers only to the click itself. I believe you can use
e.html();
there instead

this inside of your click handler refers to the DOM object, not the instance of EditableObject.
You could modify it like this:
this.element.click(function (event) {
alert($(this).html());
});