Javascript - how to show and hide an element per second?

Question

Tried Code :

Javascript :

function repeatShowAndHide(){
    setTimeout("function(){document.getElementById('adBottom'}.style='visibility:hidden;'",1000);
    setTimeout("function(){document.getElementById('adBottom'}.style='visibility:visible;'",2000);
    repeatShowAndHide();
}

HTML :

<div id="adBottom">
    Join <a href="http://lapcruis.com/">lapcrius.com</a> and be cool! | Recommended Website List : { 1. <a href="http://web-tool.weebly.com">web-tool.weebly.com</a> | 2. <a href="http://myzonehk.weebly.com">myzonehk.weebly.com</a> }
</div>

CSS :

#adBottom {
    visibility:visible;
    position:fixed;
    top:auto;
    bottom:0px;
    right:auto;
    left:0px;
    width:100%;
    height:auto;
    background-color:#000000;
    color:#FFFFFF;
    border:2px dashed #cccccc;
    text-align:center;
}

Please help. I don't know how to solve it. Please help. THX.

Answer 1

i think this example is self explanatory:

setInterval(function(){
    var myElement = document.getElementById('adBottom');

    if(myElement.style["visibility"]=="hidden"){
        myElement.style["visibility"]="visible";
    }
    else
    {
        myElement.style["visibility"]="hidden";
    }
},3000);

setInteval functions like a timer which ticks in this example every 3000ms.

Answer 2

var interval = setInterval(repeatShowAndHide, 1000);

You don't need to recall the function from repeatShowAndHide(); it will interval every second.

Answer 3

There are a couple of problems. First of all, if you're passing an anonymous function to setTimeout, actually pass a function; don't pass the code for a function inside a string (basically lose the double quotes).

Second, and more importantly, you're calling repeatShowAndHide() inside of itself, which is essentially infinite recursion. You'd want to call it after the second timeout (for two seconds) has finished.

That said, it might be much simpler to use a single interval of a second that toggles the visibility based on its current value.

var adBottom = document.getElementById('adBottom'),
    toggleInterval = setInterval(function() {
        adBottom.style.visibility = (adBottom.style.visibility === 'hidden' ? 'visible' : 'hidden');
}, 1000);

Then if you ever want to stop it you'd just need to call clearInterval(toggleInterval);.

Answer 4

Use this:

var element = document.getElementById("adBottom")
var interval = setInterval(function () {
    if(element.style.visibility === "visible")
        element.style.visibility = 'hidden';
    else
        e.style.visibility = 'visible';
}, 1000);                        // every 1000 ms

// use clearInterval(interval) to remove interval

.setInterval here executes once every second. A better way

You called the repeatShowAndHide function every time again and again from within itself i.e. recursing infinitely and kept on adding setTimeouts on top of each other without stopping, and had passed the function argument as string.

Answer 5

Try this.

html

<div id='test'>This is test</div>

javascript:

var j = setInterval(function () {
    var visible = document.getElementById('test').style.visibility;
    if(visible=='hidden'){
        document.getElementById('test').style.visibility = 'visible';
    }else{
        document.getElementById('test').style.visibility = 'hidden';
    }
}, 1000);