0

I am trying to hide the video element using javascript by using [videoclass].style.display = "none"; but it is not working.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video class="dntshow" width="444" height="250" controls>
  <source src="" id="video_here">
    Your browser can not play this video.
</video>

CSS:

.dntshow{
    display: block;
    z-index: 999;
    margin: 0 auto;
    
}

JS:

var doshow = document.getElementsByClassName("dntshow");
 doshow.style.display = "none";

What am I doing wrong?

JuicyYellow
  • 3
  • 4
  • @JuicyYellow getElementsByClassName gives you an array like structure so you can use [0] index like this var doshow = document.getElementsByClassName("dntshow")[0]; or you can use querySelector(".dntshow") – Kumar Gaurav Aug 16 '20 at 16:34

3 Answers3

0

Because getElementsByClassName gives you a list of founded DOM-elements and you just need one, so take the first one. Otherwise you could take getElementById and use an id instead of classname, so you get only one.

Try this:

var doshow = document.getElementsByClassName("dntshow")[0];
doshow.style.display = "none";
Sascha
  • 4,576
  • 3
  • 13
  • 34
0

getElementsByClassName returns a collection of elements matching the query. You need to get the element you're hiding from it. For example, if it's the first element, try this:

var doshow = document.getElementsByClassName("dntshow")[0];
doshow.style.display = "none";
kaveh
  • 2,046
  • 1
  • 21
  • 33
0

Hide all elements with class using plain Javascript

<script>
var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
    divsToHide[i].style.visibility = "hidden"; // or
    divsToHide[i].style.display = "none"; // depending on what you're doing
}
Ashwin Golani
  • 498
  • 3
  • 10