Modify the CSS using JavaScript after a brief delay

Question

Modify the CSS using JavaScript after a brief delay

I'm creating a homepage that includes animations. Inside a div, I initially have display: none, but I want it to change to display: block after a few seconds. I've been trying to use JavaScript for this purpose, but I'm struggling to find the right timer script.

The goal is to modify my CSS after a set period of time. Here's the code I've come up with so far:

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

With that said, what would be the best way to adjust my CSS using a timer?

javascript css

Answer 1

Answer №1

getElementsByClassName function returns collections of elements. You need to specify the index like this:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementsByClassName("logindiv")[0].style.display = "block";
    // testing purposes
    document.getElementsByClassName("logindiv")[0].style.color = "red";
}

.logindiv {
  display: none;
}

<div class="logindiv">Test</div>

Answer 2

getElementsByClassName function returns collections of elements. You need to specify the index like this:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementsByClassName("logindiv")[0].style.display = "block";
    // testing purposes
    document.getElementsByClassName("logindiv")[0].style.color = "red";
}

.logindiv {
  display: none;
}

<div class="logindiv">Test</div>

Answer 3

Answer №2

When using document.getElementsByClassName, all the class elements are returned, requiring a for loop to make changes to each one. If you only need to target one element, you can 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>

Fiddle with it here :: https://jsfiddle.net/5bxmcf8z/

Answer 4

When using document.getElementsByClassName, all the class elements are returned, requiring a for loop to make changes to each one. If you only need to target one element, you can 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>

Fiddle with it here :: https://jsfiddle.net/5bxmcf8z/

Modify the CSS using JavaScript after a brief delay

Answer №1

Answer №2

Similar questions

Utilize a line break within a MySQL UPDATE statement

Drop down menu alignment issue: unable to center menu on the page

Using JQuery to trigger the onchange event for a select tag

Saving JSON data as a file on server

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

Turn off and then turn on user input without exiting the textarea

Unfortunately, I am currently unable to showcase the specifics of the items on my website

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

The best way to consistently execute setTimeout in order, regardless of the timing, is by utilizing a Promise

Bootstrap not being recognized in AngularJS HTML

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

Verifying Angular JS Routing: Ensuring the Current URL Matches the Route, including Dynamic URL Parameters

Date input using manual typing format

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Create a vertical scrollable feature for the <ul> element when it is set to flex, limiting its height within the specified dimensions

What is the proper way to utilize the decodeURIComponent function?

Placing the child element behind the parent element's parent does not seem to be affected by the `z-index`

Aligning text in the center of a header, positioned beside an image

Sending HTML content to viewChild in Angular 5