CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zaryab Waseem
Zaryab Waseem

Reputation: 156

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.

Upvotes: 0

Views: 821

Answers (6)

roberrrt-s
roberrrt-s

Reputation: 8210

Alright, you should be good with a single function for this, so first, in your HTML:

<div class="col l4 m6 s12 offset-l4 offset-m3" id="Categories">
    <a class="cat-inner" href="#" onclick="show('all')">All</a>
    <a class="cat-inner" href="#" onclick="show('web')">Web</a>
    <a class="cat-inner" href="#" onclick="show('mobile')">Mobile</a>
    <a class="cat-inner" href="#" onclick="show('graphics')">Graphics</a>
</div>

(as graciously provided by Kirmayr Tomaz).

Second, create a function in javascript that responds to this with the parameter you provide:

function show(className) {
    // Select and hide all items
    var all = document.querySelectorAll('.list-item');
    for (var i = 0; i < all.length; i++) {
        all[i].style.display = 'none';
    }

    // Display selected items
    var selection = document.querySelectorAll('.' + className);
    for (var j = 0; j < selection.length; j++) {
        selection[j].style.display = 'block';
    }
}

A working codepen example can be found here

General feedback on your code:

  • It appears you're using bootstrap to style your page, the classes you use lack the hyphen that is being used by bootstrap, so a correct way of naming your classes in bootstrap would be:

col l4 m6 s12 -> col-lg-4 col-md-6 col-xs-12

  • You're using the idea 'PortfolioItem' multiple times. an id isn't supposed to be used more than once on a page. You should make a class out of it, and call it portfolio-item or something like that.

  • Include your javascript in a seperate file, it's good practice to spread HTML, CSS and `JavaScript in their own file.

Upvotes: -1

Kirmayr Tomaz
Kirmayr Tomaz

Reputation: 130

Try with jquery is more simple, when you use vanilla, you need sweep array tith dom elements

  1. Call only function
  2. Set parameter with class of function
  3. Hide all and show only you need

function show(cat){
//hide alll
  $(".web ,.all, .mobile,.graphics").hide()
  
  var categorySearch = "." + cat;
  
  var domElements = document.querySelectorAll(categorySearch);
  //show only category
  $(categorySearch).show()
  
  

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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="show('all')">All</a>
                <a href="#" class="cat-inner" onclick="show('web')">Web</a>
                <a href="#" class="cat-inner" onclick="show('mobile')">Mobile</a>
                <a href="#" class="cat-inner" onclick="show('graphics')">Graphics</a>
            </div>
        </div>
        <div id="Portfolio" class="col l12 m12 s12">
            <div id="PortfolioItem" class="col l4 web all"><img src="http://lorempicsum.com/futurama/350/200/1" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile web"><img src="http://lorempicsum.com/futurama/350/200/2" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="http://lorempicsum.com/futurama/350/200/3" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics mobile"><img src="http://lorempicsum.com/futurama/350/200/4" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics"><img src="http://lorempicsum.com/futurama/350/200/5" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web"><img src="http://lorempicsum.com/futurama/350/200/6" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 mobile"><img src="http://lorempicsum.com/futurama/350/200/7" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 graphics web"><img src="http://lorempicsum.com/futurama/350/200/8" class="portfolio-img"></div>
            <div id="PortfolioItem" class="col l4 web mobile"><img src="http://lorempicsum.com/futurama/350/200/9" class="portfolio-img"></div>
        </div>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

utdev
utdev

Reputation: 4112

I would suggest that you use jquery and do something like this:

$(document).ready(function() {
   $('.portfolio-img').click(function() {
      $('.portfolio-img').css('display', 'none');
   });
});

or use jquery's hide function like this:

$(document).ready(function() {
   $('.portfolio-img').click(function() {
      $('.portfolio-img').hide();
   });
});

I created a working snippet for you : https://jsfiddle.net/m0o9u8u1/

Upvotes: -1

Jithin Joy
Jithin Joy

Reputation: 483

function showcatweb() {

  var webs = document.getElementsByClassName('web');
  for (var i = 0; i < webs.length; i++) {
    var imgCnr = webs[i];
    imgCnr.style.display = 'block'; //to hide, imgCnr.style.display = 'none';
  }

}

If you dont want to use Jquery

Upvotes: 1

Sasha
Sasha

Reputation: 19

As i correctly understood, you can create css class with "display: none" and using

classList

to manipulate with it. It`s pure JS.

Upvotes: 1

Related Questions