CODEWITHSUNDEEP
javascriptcss
MajorSin
MajorSin

Reputation: 81

Change CSS with Javascript after a second

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?

Upvotes: 0

Views: 1357

Answers (2)

Mamun
Mamun

Reputation: 68923

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>

Upvotes: 1

user9081948
user9081948

Reputation:

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/

Upvotes: 0

Related Questions