Set CSS property with js click event handler

Question

I am trying to create an onclick event which will show/hide elements of an array however I am struggling with the showSubTabGroup() function below.

Sidenote: Eventually I would like to make this onmouseenter and onmouseleave, rather than 'click' as you see below.

I would like to be able to click on a div and show subsequent div's below as you might expect from a navigation feature.

The console is not returning any errors, however the 'click' function seems alert("CLICKED") properly.

Any help would be greatly appreciated.

Problem:

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', function () {
    alert("CLICKED");//Testing 'click' call
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  });
}

    function Tab (subTabGroup) {
      this.tab = document.getElementsByClassName("tab");
      this.subTab = document.getElementsByClassName("sub-tab");
      this.subTabGroup = subTabGroup;
    }
    
    Tab.prototype.hideSubTabs = function () {
      for (var i = 0; i < this.subTab.length; i++) {
        this.subTab[i].style.display = "none";
      }
    }
    
    Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
      this.tab[tabIndex].addEventListener('click', function () {
        for (var i = subTabIndex; i < this.subTabGroup; i++) {
          this.subTab[i].style.display = "";
        }
      });
    }
    
    var tab = new Tab(3);
    tab.hideSubTabs();
    tab.showSubTabGroup(0,0);

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Responsive Nav</title>
    </head>
    <body>
      <!-- JQuery CDN -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
      </div>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
      </div>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
        </div>
      </div>
    
      <script type="text/javascript" src="tab.js"></script>
      <script type="text/javascript" src="tabEvents.js"></script>
    
    </body>
    </html>

console.log(this);

epascarello
– epascarello

2016-10-21 12:50:48 +00:00
Commented Oct 21, 2016 at 12:50 — epascarello
– epascarello, Commented Oct 21, 2016 at 12:50

epascarello · Accepted Answer · 2016-10-21 12:56:51Z

1

The problem of what is this inside the click. It is not your tab code, it is the reference to the element that you clicked on. You need to change that by using bind

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', (function () { 
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  }).bind(this));
}

answered Oct 21, 2016 at 12:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven M. Over a year ago

This is perfect! Thank you so much! :)

Steven M. Over a year ago

I'l have to look up bind(), not exactly sure how it works.

hakany · Accepted Answer · 2016-10-21 12:40:02Z

0

As I read your post, I assume hideSubTabs() is working properly. In that case I will suggest to use in showSubTabGroup():

this.subTab[i].style.display = "initial";

instead of

this.subTab[i].style.display = "";

"initial" will set to its default e.g. as "block" for div and "inline" for span

I see that you also have included jQuery. If I may ask why don't jQuery functions which will do the same with less code:

$('.tab').on('click',function() {
    $(this).closest('.container').find('.sub-tab').toggle()
})

$('.tab').click();
$('.tab')[0].click();

answered Oct 21, 2016 at 12:40

hakany

7,2742 gold badges22 silver badges22 bronze badges

2 Comments

epascarello Over a year ago

jQuery never has less code, you know there is KBs of library code that stuff is using? ;)

hakany Over a year ago

thats correct there are KB of library code that stuff is using, but you already included. besided of that you will probably want to slide the tabs down when opening or something else and maybe other fancy stuff. This will make you code more complex. I was just asking because why invent the wheel again?

Collectives™ on Stack Overflow

Set CSS property with js click event handler

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related