How do I change multiple elements with same class name using Javascript?

Question

Follow up to my previous question - I want to use a button to show / hide multiple elements with the same class name using JS, yet it appears that I can only change the firs

Answer 1

Easy solution, made together with jQuery. I've provided just one function, which accepts an argument, which is the name of the elements you want to leave in the list.

var elems = $('.indent').children('div');

function filter(v) {
  elems.filter(function() {
    $(this).show();
    if (!$(this).hasClass(v) && v) {
      $(this).hide();
    }
  });
}

.indent {
  margin: .5em 1em .5em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="filter('design')">show design stuff</button>
<button onclick="filter('it')">show IT stuff</button>
<button onclick="filter()">show all</button>

<div class="indent">

  <div class="it">• boring IT stuff</div>
  <div class="design">• cool design stuff</div>
  <div class="it">• it stuff and things</div>
  <div class="design">• design stuff</div>
  <div class="it">• it stuff and more</div>
  <div class="other">• more it stuff</div>
  <div class="other">• it stuff</div>

</div>

Answer 2

var X = document.querySelectorAll(".className");

for (var i = 0; i < X.length; i++) {

    X[i].style.cssProperty = someNumber + "unitType";

}

Example: X[i].style.width = 100 + "%";

If you want it to apply random integers:

var X = document.querySelectorAll(".className");

for (var i = 0; i < X.length; i++) {

    var rand = Math.floor(Math.random() * someNumber);

    X[i].style.cssProperty = rand + "unitType";

}

Answer 3

It would be best to do this with classes that show/hide the element. Your problem is you are using the first index [0] of the matched array. You need to loop through each element in the array to manipulate the element.

Something like this should do the trick:

let els = document.querySelectorAll('.myclass');

els.forEach(function(el) {
  el.classList.add('hidden');
});

You can do the same with el.classList.remove(className); to remove a class

Note: forEach is an ECMAScript 5 function

Answer 4

getElementsByClassName return an array of elements. You have to iterate them and update their style one by one

var elements = {
  design: document.getElementsByClassName("design"),
  it: document.getElementsByClassName("it"),
  other: document.getElementsByClassName("other")
};

function toggle(type) {
  Object.keys(elements).forEach(function(key) {
    var els = elements[key];
    var state = "none";
    if (key === type) state = "block";
    for (var i = 0; i < els.length; i++) {
      els[i].style.display = state;
    }
  });
}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="toggle('design')">show design stuff</button>
<button onclick="toggle('it')">show IT stuff</button>
<button onclick="toggle('other')">show all</button>

<div class="indent">
  <div class="it">• boring IT stuff</div>
  <div class="design">• cool design stuff</div>
  <div class="it">• it stuff and things</div>
  <div class="design">• design stuff</div>
  <div class="it">• it stuff and more</div>
  <div class="other">• more it stuff</div>
  <div class="other">• it stuff</div>
</div>

Answer 5

You're half way there:

Use this function and pass through the class name and either 'block' or 'none'

function toggle(className, state){
    elementArray = document.getElementsByClassName(className);

    for(var i = 0; i < elementArray.length; i++){
        elementArray[i].style.display = state;
    }
}

Answer 6

You need to use a for-loop over all items you get from document.getElementsByClassName() method as in following snippet:

function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = displayValue;
  }
}

function designInfo() {
  setDisplay("design", "block");
  setDisplay("it", "none");
  setDisplay("other", "none");
}

function itInfo() {
  setDisplay("design", "none");
  setDisplay("it", "block");
  setDisplay("other", "none");
}

function allInfo() {
  setDisplay("design", "block");
  setDisplay("it", "block");
  setDisplay("other", "block");
}

.it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="designInfo()">show design stuff</button>
<button onclick="itInfo()">show IT stuff</button>
<button onclick="allInfo()">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>

---

Update Also, it could be written with less code as below:

function filter(designDisp, itDisp, otherDisp) {
  setDisplay("design", designDisp);
  setDisplay("it", itDisp);
  setDisplay("other", otherDisp);
}

function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = (displayValue? "block" : "none");
  }
}

.it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="filter(1,0,0)">show design stuff</button>
<button onclick="filter(0,1,0)">show IT stuff</button>
<button onclick="filter(1,1,1)">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>