how do i select all divs with javascript

Question

i am trying to create a filter with a checkbox when someone clicks on the check box it will hide all the div1

//so far i have used 

function div1hide() {
    document.getElementById("dive1").style.display ='none';
}

var hider = document.getElementById("div1");
document.addEventListener("click", dive1hide, false);

< id="div1">test</div>
< id="div1">test</div>
< id="div1">test</div>
< id="div1">test</div>

it only hides the first one i m not sure why its not hiding all the other ones...

id must be unique, try changing it to class and it will work — Alex Yokisama, Mar 08 '18 at 21:27
Element IDs have to be [unique](https://www.w3schools.com/tags/att_global_id.asp). Make them all `class="div1"` — pmkro, Mar 08 '18 at 21:28
In addition to @AlexYokisama comment, you'll need to change `document.getElementById()` to `document.getElementsByClassName()` or `document.querySelectorAll()`. Side note, assuming this is copy and paste, you also need the `div` part before your `id` attribute. — War10ck, Mar 08 '18 at 21:29
Use the class attribute and `getElementsByClassName()` instead of id — Egor Egorov, Mar 08 '18 at 21:30
Probably also doesn’t help that your ID selector is looking for `dive1` instead of `div1`. Watch out for typos! — Bmd, Mar 08 '18 at 21:31
The code you've presented here does not work, and does not reproduce what you're saying it does. Please read [mcve]. — Heretic Monkey, Mar 08 '18 at 22:01

score 2 · Answer 1 · edited Mar 08 '18 at 22:20

Something like this maybe?

    <div class="div1">test</div>
    <div class="div1">test</div>
    <div class="div1">test</div>
    <div class="div1">test</div>
    <input type="checkbox" id="hider" />

    <script>
      var div1 = document.getElementsByClassName("div1"); // divs to control
      var hider = document.getElementById("hider"); // checkbox
      div1.toggleStatus = "on"; // let's go!
      hider.onclick = function(){  // what happen when hitting the checkbox
        switch(div1.toggleStatus){ // two options
        case "on": // 1: hide it!
        div1.toggleStatus="off"; // hit the checkbox again and jump to 2nd option
        for (i = 0; i < div1.length; i++) { // choose all elements
          div1[i].style.display = "none"; // hide them
        }
      break;
      case "off": // 1. show it!
        div1.toggleStatus="on"; // hit the checkbox again and jump to 1st option
        for (i = 0; i < div1.length; i++) { // choose all elements
          div1[i].style.display = "block"; // show them
        }
     break;
      }
     }
    </script>

score 0 · Answer 2 · answered Mar 08 '18 at 21:36

Change this to look more like this. getElementsByClassName returns an object, which can then be iterated through to change the display of all the elements in that selection.

function div1hide() {
    var els = document.getElementsByClassName("div1");
    for(const el in els){
      els[el].style.display = "none";
    }
}

var hider = document.getElementsByClassName("div1");
document.addEventListener("click", div1hide, false);

<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>

score 0 · Answer 3 · answered Mar 08 '18 at 22:12

function div1hide() {
  var els = document.getElementsByClassName('div1');
  for(var i = 0; i < els.length; i++){
    els[i].style.display = 'none';
  }
}

document.getElementById('hide').addEventListener('click', div1hide, false);

<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>

<div id="hide">Click to hide.</div>

how do i select all divs with javascript

3 Answers3