how to pass this element to javascript onclick function and add a class to that clicked element

Question

I had an html navigation code as below  x000D   x000D  function Data string        1  get some data from server according to month year etc       2  unactive all the remaining li s and make the current clicked element active by adding  active  class to the element       filter   removeClass  active        this  addClass  active      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt div class  row  style  padding-left 21px   gt     lt ul class  nav nav-tabs  style  padding-left 40px   gt       lt li class  active filter  gt  lt a href   month  onclick  Data  month    gt This Month lt  a gt  lt  li gt       lt li class  filter  gt  lt a href   year  onclick  Data  year    gt Year lt  a gt  lt  li gt       lt li class  filter  gt  lt a href   last60  onclick  Data  last60    gt 60 Days lt  a gt  lt  li gt       lt li class  filter  gt  lt a href   last90  onclick  Data  last90    gt 90 Days lt  a gt  lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D   When the user clicks on any of the tabs  all the remaining tabs should be unactive  and the current current element tab should be active   My code above is not working   How to make the above code work  I only want to use javascript onclick for this  Is there any way that the this current  object is send when the user clicks on the tab

User · Answer

You have two issues in your code   First you need reference to capture the element on click  Try adding another parameter to your function to reference this  Also active class is for li element initially while you are tryin to add it to  a  element in the function  try this     lt div class  row  style  padding-left 21px   gt    lt ul class  nav nav-tabs  style  padding-left 40px   gt         lt li class  active filter  gt  lt a href   month  onclick  Data  month  this   gt This Month lt  a gt  lt  li gt         lt li class  filter  gt  lt a href   year  onclick  Data  year  this   gt Year lt  a gt  lt  li gt         lt li class  filter  gt  lt a href   last60   onclick  Data  last60  this   gt 60 Days lt  a gt  lt  li gt         lt li class  filter  gt  lt a href   last90   onclick  Data  last90  this   gt 90 Days lt  a gt  lt  li gt       lt  ul gt     lt  div gt    lt script gt    function Data string element                 1  get some data from server according to month year etc           2  unactive all the remaining li s and make the current clicked element active by adding  active  class to the element           filter   removeClass  active             element  parent   addClass  active              lt  script gt

User · Answer

Use this html to get the clicked element    lt div class  row  style  padding-left 21px   gt       lt ul class  nav nav-tabs  style  padding-left 40px   gt           lt li class  active filter  gt  lt a href   month  onclick  Data  month   this   gt This Month lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   year  onclick  Data  year   this   gt Year lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   last60  onclick  Data  last60   this   gt 60 Days lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   last90  onclick  Data  last90   this   gt 90 Days lt  a gt  lt  li gt       lt  ul gt    lt  div gt    Script    function Data string  el              filter   removeClass  active           el  parent   addClass  active

User · Answer

Try like   lt script gt  function Data string                filter   removeClass  active        this  parent   filter   addClass  active         lt  script gt    For the class selector you need to use   before the classname And you need to add the class for the parent     Bec you are clicking on anchor tag not the filter

User · Answer

You can use addEventListener to pass this to a JavaScript function   HTML   lt button id  button  gt Year lt  button gt    JavaScript   function          var btn   document getElementById  button        btn addEventListener  click   function              Date   year           false           function Data string                                  filter   removeClass  active                      this  parent   addClass  active

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 8 2 jquery js  gt  lt  script gt    lt script type  text javascript  src  jquery-2 1 0 js  gt  lt  script gt    lt script type  text javascript   gt  function openOnImageClick event      alert  Jai Sh Raam       document getElementById  images   src    fruits jpg   var target   event target    event srcElement     IE  console log target   console log target src    var img   document createElement  img     img setAttribute  src   target src     img setAttribute  width    200       img setAttribute  height    150      document getElementById  images   appendChild img          lt  script gt   lt  head gt   lt body gt    lt h1 gt Screen Shot View lt  h1 gt   lt p gt Click the Tiger to display the Image lt  p gt    lt div id  images   gt   lt  div gt    lt img src  tiger jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick event     gt   lt img src  sabaLogo1 jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick event     gt    lt  body gt   lt  html gt

User · Answer

lt div class  row  style  padding-left 21px   gt       lt ul class  nav nav-tabs  style  padding-left 40px   gt           lt li class  active filter  gt  lt a href   month  onclick  Data this   gt This Month lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   year  onclick  Data this   gt Year lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   last60  onclick  Data this   gt 60 Days lt  a gt  lt  li gt           lt li class  filter  gt  lt a href   last90  onclick  Data this   gt 90 Days lt  a gt  lt  li gt       lt  ul gt    lt  div gt    lt script gt      function Data element                    element removeClass  active           element addClass  active            lt  script gt

[javascript] how to pass this element to javascript onclick function and add a class to that clicked element

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to onclick