To initiate the onclick event, I have this
[].forEach.call(btnAddVendorDropDown, (btnAddVendorDropDown) => {
btnAddVendorDropDown.addEventListener('click', onAddVendorDropDownClick, false);
});
The function is
function onAddVendorDropDownClick(e) {
e.preventDefault();
addNewClass(modal, 'is-active');
addNewClass(modalAddVendorDropDown, 'is-active');
const test = $(this).attr('id');
console.log(test);
return test;
}
So what I'm trying to do is when a user clicks btnAddVendorDropDown, the function onAddVendorDropDownClick is called. I need to grab the id from the element. When I do console.log of the element attribute id from inside the function, I get exactly what I need. The problem I'm running into is when I try to grab it from outside the function, I keep getting undefined. I don't understand how I can grab the id once it calls this function from outside this function.
I tried this
var num = onAddVendorDropDownClick();
console.log("the function return is " + num);
Which is what shows undefined.
this is related directly to the caller's scope. This means that without "binding" a scope to your event handler, this is going to refer to your main application scope, and not the scope that jquery passes as you chain functions.
You can either wrap the event object's target:
function onClickHandler(e) {
$(e.target).attr('id');
}
Or you can use $(this) within the jquery context of a click handler:
$('#my-button').on('click', function(e) {
$(this).attr('id');
});
The last example works because it is occurring inside a JQuery closure, so it retains the scope from the previous function. Outside of a closure, this means something else.
$(this) is JQuery context, and you are inside javascript function. You can change the click button to JQuery to use it:
var test;
$("button").click(function(){
test = $(this).attr('id');
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnTeste">
Teste
</button>
Related
How can I store the ID value of this button so that I can use it on another function that won't get a click?
<button id="1" onclick="myfunction(this.id)">Click Here</button>
function myfunction(clicked){
var thisnum = clicked;
document.querySelector(".holder--" + thisnum).classlist.add("store")
}
function secondfunction(){
document.querySelector(".box--" + thisnum).classlist.remove("store")
}
You can initiate variables outside of the function, and give them a value from inside the function like so:
var thisnum; // Initiate the variable globally
function myfunction(clicked){
thisnum = clicked; // And now change its value
secondfunction();
}
function secondfunction(){
console.log("Here is the id: " + thisnum); // And now read its value
}
<button id="1" onclick="myfunction(this.id)">Click Here</button>
Your code works and passes along the element id, but to answer your question - you need to initialize the variable outside of any functions. Then when you set it (in a function or elsewhere), it will be available to other functions in the script.
I thought I might help further your knowledge by showing a 'better' way to go about this.
The onclick in the button is an event listener, but the preferred way to do this is to attach the listener through javascript.
document.querySelector('#theButton').addEventListener('click', myfunction);
You'll notice I put this in a window.onload function below. That is because we don't want to try and set the listener until all the HTML has had a chance to get on the page (after the page loads).
This listener function automatically passes along one function argument event which you can name anything (you'll often see it as e). The reference to the object that created this event (the button) is always e.target
Also passing attributes like numbers is best done through data-attributes which are cool because you can put any information in those and easily pick them up in your script.
<button data-id="1" id='theButton'>Click Here</button>
<!-- notice the data-id attribute -->
// and in your script:
var thisnum = e.target.dataset.id
Plus, although technically you can do things like id='1' on an element, it's not good practice. It's better to use an explicit string (or at least start with a letter).
window.onload = function() {
document.querySelector('#theButton').addEventListener('click', myfunction);
}
let id // define the variable outside of the functions
function myfunction(e) {
id = e.target.dataset.id // set the variable wherever
console.log('the ID:', id);
setTimeout(() => {otherfunction()}, 1000);
}
function otherfunction() {
console.log("ID from otherfunction: ", id)
}
<button data-id="1" id='theButton'>Click Here</button>
I'm trying to enable some touch controls through a callback function but I'm having trouble accessing the event as well as $(this) in my callback function. Right now the code looks as follows:
$('.img-responsive').each(touchControls);
function touchControls(event) {
event.preventDefault();
var mc = new Hammer(this);
mc.on("doubletap", function() {
console.log($(this));
});
}
Where '.img-responsive' is a class of images on my page.
When it tries to call event.preventDefault, I get an error that event.preventDefault is not a function. I thought the event was automatically passed to the variable called? I know when I did a named callback function with .on, event.preventDefault() worked perfectly fine. I assume it's different when I do it with .each, how do I properly access it?
Now, if I remove the event.preventDefault() line, when it logs $(this), I get a function. I was expecting to get individual elements so I could set touch controls for them, but that clearly didn't work. I tried to bind 'this' by:
$('.img-responsive').each(touchControls).bind(this);
But when I logged $(this), it was still a function and not the element I was expecting.
I'm basically just confused as to how to access $(this) and event within the defined callback function.
.each is not an event handler so its callback function does not accept an event object. The method signature of the each callback function looks like this:
.each( function )
function
Type: Function( Integer index, Element element )
A function to execute for each matched element.
So you won't have an event object to reference but, more importantly, there will be no default event behavior to prevent.
Conversely, on does in fact setup event handlers. Its callback function does take an event as its parameter. You can handle your event management within your event handler code, inside the callback function for .on.
this will refer to your current element as you iterate. But inside your inner callback function there will be a different context (so a different this). Simply store a reference to the element in the outer scope:
function touchControls() {
var $this = $(this);
var mc = new Hammer(this);
mc.on("doubletap", function(e) {
e.preventDefault();
console.log($this);
});
}
You have the event being passed in the wrong function.. You need to pass it into the event listener. The first argument of an each loop is the current index of the iteration.
$('.img-responsive').each(touchControls);
function touchControls(eachIndex) {
var mc = new Hammer(this);
mc.on("doubletap", function(event) {
// move preventDefault here and pass the event
event.preventDefault();
console.log($(this));
});
}
function Hammer(el){
return $(el)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-responsive">img</div>
<div class="img-responsive">img</div>
I'm trying to access 'this' inside a method that is called from a button press, where this refers to both the class and the button pressed:
p.myVar = 'banana';
$('.go').on('click', this._init);
p._init = function(e){
//get the button pressed
//get this.myVar
};
To do this I bind this:
$('.go').on('click', this._init.bind(this));
The above works and I can now access my var via:
this.myVar; //banana
But I can no longer access the button.
How can I access it, use e.currentTarget or is there a better way?
You should use the data argument :
$('.go').on('click', {myVar:'banana'}, this._init);
p._init = function(e){
// use e.data.myVar;
// this is the right matching clicked element
};
I presume your declaring the event listener in a closure, if so you can use a local variable and pass it that, the reference is unique to the closure and can be accessed by the function in the listener when it is called. It becomes a kind of invisible global, the reference only exists to that specific call and the listener function but is still shared.
function initButtons(){
var selfRef = this;
$('.go').on('click',selfRef._init);
}
Inside an event listener, I need a reference to the element that was the event source. How do I get that?
This should be a no-brainer for anyone doing JavaScript for some time.
All the functions including the event handler are in global scope, and therefore, implicitly made a part of the DOM window object.
function WireHandlers() {
$('.updateResourceImageButton').click(UpdateResourceLinkClickedHandler);
}
function UpdateResourceLinkClickedHandler() {
// I would like a reference to the hyperlink/anchor
// that was actually clicked, i.e. the hyperlink that
// was the source of this event
// would the keyword 'this' evaluate to the element I need?
// or will it evaluate to the HTML DOM 'window' object
// in this context?
}
$(document).ready(function () { WireHandlers(); });
When you pass the function by reference you still get access to the parameters as normal. As such event.target or this will be the clicked element within the UpdateResourceLinkClickedHandler function:
function UpdateResourceLinkClickedHandler(e) {
// clicked element as a native DOM element
var foo = e.target;
var bar = this;
// jQuery object containing clicked element
var $foo = $(this);
}
Note, both foo and bar in this example will contain the same value.
I think you can do it like this
$(this)
also this is from jquery documentation
var target = $( event.target );
as in this page http://api.jquery.com/event.target/ and look at this article for more information http://www.pkshiu.com/loft/archive/2009/01/understanding-this-this-and-event-in-a-jquery-callback-function
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());
});