0

I am making a homepage with some animation. I have display: none in a div. I want display: block after some seconds. I am using some Javscript. The problem now is, that I can't search for a timer script.

I want that my CSS wil change after some seconds. My code:

var myVar = setInterval(myTimer, 1000);
    function myTimer() {
        document.getElementsByClassName("logindiv").style.display = "block";
    }

So, how can I change my CSS with a timer?

MajorSin
  • 71
  • 9
  • You want to change the styles only once? – Marouen Mhiri Dec 31 '17 at 16:17
  • Possible duplicate of [Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) – ryanwebjackson Dec 31 '17 at 16:18
  • Yes @MarouenMhiri – MajorSin Dec 31 '17 at 16:18
  • @ryanwebjackson its not a duplicate of https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript –  Dec 31 '17 at 16:26
  • Do you need the value of `display` to always change at certain interval or you need to change the value to change after a certain interval only once? For the latter, consider using `setTimeout ` and not `setInterval` – Mark Dec 31 '17 at 16:34
  • @Kumar - I apologize; I was working from my phone, and it was the closest option that it would provide. I'm sure it is a duplicate however, as it can be determined by a web search or by reading documentation. – ryanwebjackson Dec 31 '17 at 22:09

2 Answers2

1

getElementsByClassName return collections. You have use index like the following:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementsByClassName("logindiv")[0].style.display = "block";
    // for test
    document.getElementsByClassName("logindiv")[0].style.color = "red";
}
.logindiv {
  display: none;
}
<div class="logindiv">Test</div>
Mamun
  • 66,969
  • 9
  • 47
  • 59
0

document.getElementsByClassName returns all our class elements, You need use a for loop to change for all of them. If you need only one then use elements[0].style.display = "block";

<div class="logindiv" style="display:none">
  This is login div
</div>

<script>
   setTimeout(myTimer, 1000);
    function myTimer() {
        var elements = document.getElementsByClassName("logindiv");
        for(i=0;i<elements.length;i++){
         elements[i].style.display = "block";
        }
    }
</script>

jsfiddle :: https://jsfiddle.net/5bxmcf8z/