Change CSS with Javascript after a second

Question

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?

Possible duplicate of Change an element's class with JavaScript — ryanwebjackson
– ryanwebjackson, Commented Dec 31, 2017 at 16:18
@ryanwebjackson its not a duplicate of stackoverflow.com/questions/195951/… — user9081948
– user9081948, Commented Dec 31, 2017 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
– Mark, Commented Dec 31, 2017 at 16:34

Mamun · Accepted Answer · 2017-12-31 16:28:16Z

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>

edited Dec 31, 2017 at 16:28

answered Dec 31, 2017 at 16:18

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user9081948 · Accepted Answer · 2017-12-31 16:22:59Z

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/

answered Dec 31, 2017 at 16:22

user9081948

Collectives™ on Stack Overflow

Change CSS with Javascript after a second

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related