Zaryab Waseem Zaryab Waseem - 3 months ago 9
CSS Question

How to override style using document.getElementsByClassName with onclick function

I am trying to make an image filter like isotope.js because I can't and I don't want to use Isotope.js.

The Problem is that onclick function is not working with document.getElementsByClassName();

All I want to do is that when I click on a link with onclick function that function should set the style of other classes to display:none;
Here is my HTML:

<div id="CategoriesContainer" class="col l12 m12 s12">
<div id="Categories" class="col l4 m6 s12 offset-l4 offset-m3">
<a href="#" class="cat-inner" onclick="showcatall()">All</a>
<a href="#" class="cat-inner" onclick="showcatweb()">Web</a>
<a href="#" class="cat-inner" onclick="showcatmobile()">Mobile</a>
<a href="#" class="cat-inner" onclick="showcatgraphics()">Graphics</a>
</div>
</div>
<div id="Portfolio" class="col l12 m12 s12">
<div id="PortfolioItem" class="col l4 web all"><img src="Images/web1.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 mobile web"><img src="Images/web2.jpeg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 graphics web"><img src="Images/web3.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 graphics mobile"><img src="Images/graphics1.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 graphics"><img src="Images/graphics2.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 web"><img src="Images/web1.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 mobile"><img src="Images/graphics2.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 graphics web"><img src="Images/graphics1.jpg" class="portfolio-img"></div>
<div id="PortfolioItem" class="col l4 web mobile"><img src="Images/web2.jpeg" class="portfolio-img"></div>
</div>


Can anyone suggest me Javascript for this?

Thanks.

Answer

My proposal is:

// on DOMContentLoaded
window.addEventListener('DOMContentLoaded', function (e) {
  // get all "cat-inner" elements and attach the click handler
  Array.prototype.slice.call(document.getElementsByClassName('cat-inner')).forEach(function (ele, index) {
    ele.addEventListener('click', function (e) {
      e.preventDefault();
      
      // get the current text content of the anchor
      var txt = this.textContent.toLowerCase();

      // for each children element set the appropriate visibility
      Array.prototype.slice.call(document.getElementById('Portfolio').children).forEach(function (ele, index) {
        switch (txt) {
          case 'all':
            ele.style.display = 'block';
            break;
          default:
            if (ele.className.indexOf(txt) != -1) {
              ele.style.display = 'block';
            } else {
              ele.style.display = 'none';
            }
            break;
        }
      });
    });
  });
});
<div id="CategoriesContainer" class="col l12 m12 s12">
  <div id="Categories" class="col l4 m6 s12 offset-l4 offset-m3">
    <a href="#" class="cat-inner">All</a>
    <a href="#" class="cat-inner">Web</a>
    <a href="#" class="cat-inner">Mobile</a>
    <a href="#" class="cat-inner">Graphics</a>
  </div>
</div>
<div id="Portfolio" class="col l12 m12 s12">
  <div id="PortfolioItem1" class="col l4 web all">All<img src="Images/web1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem2" class="col l4 mobile web">Web<img src="Images/web2.jpeg" class="portfolio-img"></div>
  <div id="PortfolioItem3" class="col l4 graphics web">Web<img src="Images/web3.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem4" class="col l4 graphics mobile">Mobile<img src="Images/graphics1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem5" class="col l4 graphics">Graphics<img src="Images/graphics2.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem6" class="col l4 web">Web<img src="Images/web1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem7" class="col l4 mobile">Mobile<img src="Images/graphics2.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem8" class="col l4 graphics web">Web<img src="Images/graphics1.jpg" class="portfolio-img"></div>
  <div id="PortfolioItem9" class="col l4 web mobile">Mobile<img src="Images/web2.jpeg" class="portfolio-img"></div>
</div>