Can't change style : display using getelementbyclassname

Question

document.getElementByClassName('xyz').style.display = 'none';

I am unable to hide class content.

with `getElementsByClassName` you are getting `HTMLCollection` so try `document.getElementsByClassName('xyz')[0].style.display = 'none';` — Yordan Nikolov, Jul 10 '17 at 12:43
Next time Press F12 and read the console logs. It should point you to at least one mistake you did there. — user5014677, Jul 10 '17 at 12:48
Do you have one, or more than one, elements with the class `xyz`? — , Jul 10 '17 at 19:11
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Ivar, Jul 21 '21 at 07:03

score 13 · Answer 1 · answered Jul 10 '17 at 12:43

document.getElementsByClassName return an array like object. you can use following script for this

document.getElementsByClassName('xyz')[0].style.display = 'none';

or if you want to hide all .xyz element

var x = document.getElementsByClassName("xyz");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
}

score 4 · Answer 2 · edited Jul 10 '17 at 19:18

function show(){
var element = document.getElementsByClassName('elem');
console.log(element);
element[0].style.display = 'block';
}

.elem {
  display: none;
}

<div> visible
  <div class="elem">hidden
  </div>
  <button type="button" onclick="show()">click</button>
</div>

getElementsByClassName returns an array, you can't directly set the style of element like it.

DrunkDevKek · Answer 3 · 2017-07-10T12:46:32.010

1

You need to do something like: let elem = document.getElementsByClassName('xyz')[0];

elem.style.display = 'none';

edited Jul 10 '17 at 12:46

answered Jul 10 '17 at 12:44

DrunkDevKek

469
4
17

score 1 · Answer 4 · answered Jul 10 '17 at 12:47

document.getElementsByClassName elements is a live HTMLCollection of found elements.

<div class="xyz">

test content
</div>
<button  type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = 'none';">Hide Content </button>
<button  type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = '';">Show Content </button>

score 1 · Answer 5 · answered Apr 29 '20 at 11:23

    $("#afficher_commentaire").change(function(){ 
        // alert("OK");
            if($(this).prop("checked") == true){
              var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
              for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) { 
                  commentaire_date_fin_fourniture[i].style.display='block';
                  }
            }
            else if($(this).prop("checked") == false){
              var commentaire_date_fin_fourniture = document.getElementsByClassName("commentaire_date_fin_fourniture");
            for (var i = 0; i < commentaire_date_fin_fourniture.length; i++) { 
                commentaire_date_fin_fourniture[i].style.display='none';
                }
            }
     });

score 0 · Answer 6 · answered Jul 10 '17 at 12:46

0

Working version

hide = function(){
document.getElementsByClassName('xyz')[0].style.display="none";
}

<input class="xyz" type="text"/>

<button onclick="hide();">Click to hide!</button>

answered Jul 10 '17 at 12:46

Marco Salerno

5,131
2
12
32

score 0 · Answer 7 · answered Jul 10 '17 at 19:17

If you really want to do things this way, then of course first you need to spell getElementsByClassName correctly; you saw this error in the console, right? Then, you need to know that getElementsByClassName returns an array-like things; you saw that in the documentation, right? So you have to loop over it, or take the first element with [0], or whatever.

But in general, it's bad practice to retrieve elements from the DOM like this and set their styles directly. Instead, take advantage of CSS, which will do 90% of the work for you. Here, I'd use a single higher-level class which controls the behavior, and just set that:

<main id="main">
  <div class="xyz"></div>
<main>

Then write your CSS as

main.hide-xyz .xyz { display: none; }

To hide the xyz element, then you need a single JS statement:

document.getElementById("main").classList.add("hide-xyz");

To remove it:

document.getElementById("main").classList.remove("hide-xyz");

Or toggle it:

document.getElementById("main").classList.toggle("hide-xyz");

Once you wrap your head around this style, you'll find yourself writing much less JavaScript that needs to all kinds of DOM lookups and loops and setting of styles.

only works in case you have an id one could link to, if used only classes this would not work (for example in a ng-repeat) — Ewald Bos, Nov 23 '19 at 10:57

score 0 · Answer 8 · answered Jan 10 '23 at 11:55

document.getElementsByClassName always returns an array like object. Specify the array[0] number.

Typescript

let hiddenLocales = document.getElementsByClassName('localeMatch') as HTMLCollectionOf<HTMLElement>;
let hideParentNode = hiddenLocales[0]?.parentElement;
hideParentNode?.remove(); // Remove the element
hideParentNode?.style.display = "none"; // Hide the element

Can't change style : display using getelementbyclassname

8 Answers8

Linked