CODEWITHSUNDEEP
javascript
Thomas
Thomas

Reputation: 13

Hide a section with JS with document.getElementsByClassName

I cannot find where is my mystake. I try to hide this section (i.e. survey1) in HTML through JS. Could you please help me? Thanks

Here is my code in html

<section id="survey1" class="survey1">

        <ul class="meta2">
                <li class="icon2 fa-clock-o">2 min.</li>
                <li class="icon2 fa-gift"><a href="#">1 point</a></li>

        </ul>       


 <nav id="banner2"> 
     <li>  <a href="survey.html" class="button2"> Go </a> </li>
     <li>  Sondage 1 sur le développement personnel<br/></li>


 </nav>
</section>

Here is my code in CSS

.hidden {
  display: none;}

Here is my code in JS

classv= document.getElementsByClassName('survey1');
classv.className='hidden';

Upvotes: 1

Views: 34

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

The function getElementsByClassName() gives you a HTMLCollection, a collection of Nodes. So if there's only one node in it, you can very well use [0]:

classv = document.getElementsByClassName('survey1');
classv[0].className = 'hidden';

I would recommend using .classList.add():

classv[0].classList.add('hidden');

So that if you wanna remove it, you can do so by using:

classv[0].classList.remove('hidden');

Upvotes: 1

Related Questions