Using Array inside the getElementsByClassName()

Question

im new in javaScript and i was trying to hide a multiple divs by running a function. the divs are exist, they called test1 until test8 . every time i activate the function it gives me error document.getElementsByClassName(...).style is undefined

here is my code

var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (var i=0; i<divs.length; i++)  {
  document.getElementsByClassName(divs[i]).style.display = "none";
  }

HTML

  <div class="test1">
    <p>Hi 1</p>
  </div>
  <div class="test2">
    <p>Hi 2</p>
  </div>
  <div class="test3">
    <p>Hi 3</p>
  </div>
  <div class="test4">
    <p>Hi 4</p>
  </div>
  <div class="test5">
    <p>Hi 5</p>
  </div>
  <div class="test6">
    <p>Hi 6</p>
  </div>
  <div class="test7">
    <p>Hi 7</p>
  </div>
  <div class="test8">
    <p>Hi 8</p>
  </div>

After reading the duplicate question I tried this:

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    var elems = document.getElementsByClassName(divs[i]); 
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}

`document.getElementsByClassName(divs[i])` returns an Array, you need to set the `style` of the elements of the Array individually. — zero298, Feb 26 '19 at 18:02
`getElementsByClassName` returns an array. You need to operate on the first item in it. — jmargolisvt, Feb 26 '19 at 18:02
@zero298 It does not return an Array. It returns a node list. — Scott Marcus, Feb 26 '19 at 18:03
@jmargolisvt t does not return an Array. It returns a node list. — Scott Marcus, Feb 26 '19 at 18:04
@ScottMarcus not node-list. but [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) :) There is difference — m51, Feb 26 '19 at 18:05
NB: calling your CSS classes with a numerical suffix like that may indicate a bad design. Chances are you should really use one and the same class name. — trincot, Feb 26 '19 at 18:06
@trincot the divs are called something else on the real code but to make it easier to understand i make them like this — Assad Rajab, Feb 26 '19 at 18:12
@kotlet For all practical purposes, there isn't a difference. As the docs. state, the name HTML Collection is for historical reasons. That collection contains nodes and implements the node list interface. — Scott Marcus, Feb 26 '19 at 18:20
@Barmar dude you did just marked my post as marked with out to give any usable information i checked the link but i didnt find what i want so please answer my question or remove that duplicated sign — Assad Rajab, Feb 26 '19 at 18:23
The very first answer to the duplicate question shows exactly what you need to do. — Barmar, Feb 26 '19 at 18:24
If you can't figure out how to incorporate that answer into your code, post what you tried, and I'll reopen the question so we can explain how to fix it. — Barmar, Feb 26 '19 at 18:26
It's just `var elems = document.getElementsByClassName(divs[i]);` followed by the `for` loop in the duplicate. — Barmar, Feb 26 '19 at 18:28
See [this Fiddle](https://jsfiddle.net/oaf4pbgx/4/) for your solution. You shouldn't be using `.getElementsByClassName()` in the first place. — Scott Marcus, Feb 26 '19 at 18:37
@Barmar That will only iterate over 8 node lists. With that approach, he'll need a nested loop to iterate over each node in each of the node lists. — Scott Marcus, Feb 26 '19 at 18:46
function cleardiv() { var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; var elems = document.getElementsByClassName(divs[i]); for (var i = 0; i — Assad Rajab, Feb 26 '19 at 18:46
@Barmar thank you for your help but that what you told me didnt work some how… ive pasted the code in a comment — Assad Rajab, Feb 26 '19 at 18:49
@AssadRajab You're missing the `for` loop that iterates over `divs`. — Barmar, Feb 26 '19 at 18:50
@ScottMarcus Thank you for your help that is just what i wanted. it works thank you man — Assad Rajab, Feb 26 '19 at 18:50

score 1 · Accepted Answer · answered Feb 26 '19 at 18:52

1

When you added the loop over the elements in the class, you removed the loop over the class names. You need nested loops to get everything.

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    for (var j = 0; j < divs.length; j++) {
        var elems = document.getElementsByClassName(divs[j]); 
        for (var i = 0; i<elems.length; i++) { 
            elems[i].style.display = 'none'; 
        } 
    }
}

You could also do it with a single loop by using querySelectorAll.

function cleardiv() {
    var elems = document.querySelectorAll(".test1,.test2,.test3,.test4,.test5,.test6,.test7,.test8");
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}

answered Feb 26 '19 at 18:52

Barmar

741,623
53
500
612

Alright, thank you very much. but at that link you attached to my question it wasn't clear like here. – Assad Rajab Feb 26 '19 at 19:00
but there are a small big problem… the code it writing the update in the element and not in the css file. so if i try to display the div again its not being displayed. how to solve that? – Assad Rajab Feb 26 '19 at 19:28
Do you really want to change the file on the server permanently? That has to be done by a server script. – Barmar Feb 26 '19 at 21:48
If you want to change stylesheet rules dynamically in the current session, see https://stackoverflow.com/questions/6620393/is-it-possible-to-alter-a-css-stylesheet-using-javascript-not-the-style-of-an – Barmar Feb 26 '19 at 21:53

Using Array inside the getElementsByClassName()

1 Answers1