How to find the ID of an element that was clicked

Question

What I have is a class of table rows that, when one of them is clicked, activates a function in jQuery capturing the id of the element that was clicked. I have seen several posts on how to do this (i.e Getting the ID of the element that fired an event or JavaScript - onClick to get the ID of the clicked button), but none of them have worked for me.

So, I thought that this would work:

$(".yourStockTabs").click(function() {
    if (sellStockClicked === true) {
        var ids = $(this).attr("id");
        alert(ids);
    }
});

But it does not. The sellStockClicked === true part is the checker to make sure that a button has already been previously clicked. I figured at first maybe the code to get the attribute was incorrect or maybe the variable wasn't true, but I found that neither of these were the case because I removed the if function and commented out the id part and just had it alert something, but it still did not.

Here is the full code:

$("#sellStockButton").click(function() {
    var sellStockClicked = true;
    alert("Please click on the row of the stock that you would like to sell.\n\nWhen you are finished, click this button again.");
    $(".yourStockTabs").css("background", "#E50000");
    $(".yourStockTabs").css("cursor", "pointer");
});
$(".yourStockTabs").click(function() {
    if (sellStockClicked === true) {
        var ids = $(this).attr("id");
        alert(ids);
    }
});
$("#sellStockButton").click(function() {
    if (sellStockClicked === true) {
       var sellStockClicked = false; 
    }
});

^ Basically your click handler should be `$(document).on("click", ".yourStockTabs", function() { ...})` — Nisarg Shah, Nov 12 '17 at 13:25

score 2 · Accepted Answer · answered Nov 12 '17 at 13:27

The problem is your variable sellStockClicked is declared inside a function.

try removing this variable declaration outside as :

var sellStockClicked ;
$("#sellStockButton").click(function() {
    sellStockClicked = true;
    alert("Please click on the row of the stock that you would like to sell.\n\nWhen you are finished, click this button again.");
    $(".yourStockTabs").css("background", "#E50000");
    $(".yourStockTabs").css("cursor", "pointer");
});
$(".yourStockTabs").click(function() {
    if (sellStockClicked === true) {
        var ids = $(this).attr("id");
        alert(ids);
    }
});
$("#sellStockButton").click(function() {
    if (sellStockClicked === true) {
       var sellStockClicked = false; 
    }
});

score 1 · Answer 2 · answered Nov 12 '17 at 13:29

Vanilla

window.addEventListener("DOMContentLoaded", () => {
const e = document.body;
e.addEventListener("click" , e => {
console.log(e.target.id);
});
});

<input type="text" placeholder="clickme" id="itsmiId">
<input type="text" placeholder="clickme" id="wowclickme">

score 0 · Answer 3 · answered Nov 12 '17 at 13:27

Maybe are you looking for this:

var sellStockClicked = true;
var ids = [];

$("#sellStockButton").click(function() {
  alert("Please click on the row of the stock that you would like to sell.\n\nWhen you are finished, click this button again.");
  $(".yourStockTabs").css("background", "#E50000");
  $(".yourStockTabs").css("cursor", "pointer");
});
$(".yourStockTabs").click(function() {
  if (sellStockClicked === true) {
    ids.push($(this).attr("id"));
    alert(ids);
  }
});
$("#sellStockButton").click(function() {
  if (sellStockClicked === true) {
    sellStockClicked = false; 
  }
});

How to find the ID of an element that was clicked

3 Answers3