I have researched on the web and tested for a solution for quite a while, but have not been able to make this work. So I have decided to create a post here, even though its probably low-skilled and I'll get downvoted for it I have put a lot of effort and I hope someone can help out.

My code at the moment uses .click() function from JQuery and my goal is to use it on a button so that when I click that button, it checks whether the id of the button clicked on matches a variable that I set in the .js file. In other words, check if the thing I clicked on's id is equal to my "target".

This is the part of the code with the problem:

var target = '#vig_but_inc';

$(this).click(function() {

    if(this.id == target) {
        vigor.incStat(); // increase stats once
        console.log("hi"); // test if code fires
        $('#vig_res').html(vigor.current);
    }
});

Please note I have checked if the code works without matching the id, without the if-statement - in that situation if I click on a specific, preset button's id I managed to increase the value of #vig_res which is my goal.

However with the if involved, as explained prior, I am trying to match what is being clicked on with my target, which is the id name I wish it to match to. I'm using this to check my click, which has worked in other areas but doesn't seem to work in this context.

I have made the variable target global scope as explained here in the ments: Check if the clicked div id matches with variable. It still doesn't work.

I know and have tested $(this).click(.., where it would fire off the code inside of whatever div I clicked. So I believe the problem lies afterwards, maybe in the this.id, but I've also used .is() like suggested elsewhere but it won't work that way either.

I hope someone can give me some insight into how to tackle this problem, thank you.

I have researched on the web and tested for a solution for quite a while, but have not been able to make this work. So I have decided to create a post here, even though its probably low-skilled and I'll get downvoted for it I have put a lot of effort and I hope someone can help out.

My code at the moment uses .click() function from JQuery and my goal is to use it on a button so that when I click that button, it checks whether the id of the button clicked on matches a variable that I set in the .js file. In other words, check if the thing I clicked on's id is equal to my "target".

This is the part of the code with the problem:

var target = '#vig_but_inc';

$(this).click(function() {

    if(this.id == target) {
        vigor.incStat(); // increase stats once
        console.log("hi"); // test if code fires
        $('#vig_res').html(vigor.current);
    }
});

Please note I have checked if the code works without matching the id, without the if-statement - in that situation if I click on a specific, preset button's id I managed to increase the value of #vig_res which is my goal.

However with the if involved, as explained prior, I am trying to match what is being clicked on with my target, which is the id name I wish it to match to. I'm using this to check my click, which has worked in other areas but doesn't seem to work in this context.

I have made the variable target global scope as explained here in the ments: Check if the clicked div id matches with variable. It still doesn't work.

I know and have tested $(this).click(.., where it would fire off the code inside of whatever div I clicked. So I believe the problem lies afterwards, maybe in the this.id, but I've also used .is() like suggested elsewhere but it won't work that way either.

I hope someone can give me some insight into how to tackle this problem, thank you.

• javascript
• jquery
• this

Share Improve this question Follow edited May 23, 2017 at 11:54 CommunityBot 111 silver badge asked Apr 30, 2017 at 11:53 DarkphotonDarkphoton 51611 gold badge55 silver badges1717 bronze badges 5

• debug by checking what does this.id give you – user7929528 Commented Apr 30, 2017 at 11:57
• What does this refer in $(this).click()? Learn to use console – Satpal Commented Apr 30, 2017 at 11:58
• @Satpal I believe I learned this makes the currently clicked on event fire the .click() function on that, I've tried it works as long as I'm not trying to match this.id. My goal of this code is simply to check if what I clicked on is my pre-set id, if it is, fire the code inside the function. – Darkphoton Commented Apr 30, 2017 at 12:12
• I'm not so sure abstracting the button clicks to their IDs is worthwhile. Why not just define a function that updates vigor when you click the button, ie $('#vig_but_inc').click(function that updates vigor with no "if" that checks what id the clicked button has); – James Commented Apr 30, 2017 at 13:16
• Also what is the $(this) to which you are assigning the event handler, the document? – James Commented Apr 30, 2017 at 13:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The answer is a little more plicated, in the anonymous function which is called when the click is triggered, this is not the clicked element, it is a jQuery object. You should accept as first parameter event and use event.target. Plus, target should not contain the #, because the .id returns only the name.

So, your code should look like this:

var target = 'vig_but_inc';

$(this).click(function(event) {
    console.log(event.target);
    if(event.target.id == target) {
        vigor.incStat(); // increase stats once
        console.log("hi"); // test if code fires
        $('#vig_res').html(vigor.current);
    }
});

Working Fiddle: https://jsfiddle/e8np0g9j/3/

Use the id and class selected before calling the click function like

$('.class').click(function() {});