problems with color exchange through javascript

Question

I have a problem in javascript where each time period changes the color of an element.

Follow the code below:

<script type="text/javascript">
        var timer = setInterval(modCor, 5000);
        var cor = 0;

        function modCor (){

            if (cor==0){
                var cor = 1;
                var logoImg = document.getElementById('logo');
                logoImg.style.border = "thick solid #00FF00";
            }else if (cor == 1){
                var cor = 0;
                var logoImg = document.getElementById('logo');
                logoImg.style.border = "thick solid #FF0000";
            }
        }
</script>

This is the HTML:

<img src="empresa logo.jpg" class="Image_geral" id="logo">

Answer 1

You are redeclareting the variable cor within the function, and thereby lose access to the external scope variable. Do so (I took the opportunity to remove an unnecessary repetition):

var timer = setInterval(modCor, 5000);
var cor = 0;

function modCor (){
    var logoImg = document.getElementById('logo');
    if (cor==0){
        cor = 1;
        logoImg.style.border = "thick solid #00FF00";
    }else if (cor == 1){
        cor = 0;
        logoImg.style.border = "thick solid #FF0000";
    }
}

#logo {
  width: 300px; 
  height: 200px; 
  background: #ccc;
  transition: all 1s;
}

<div id="logo"></div>

The transition effect is due to the CSS.

Answer 2

If I got it right, you want a background loop, well it has a CSS3 function that can do it for you, but can you imagine how this can help me? Good you can do with Javascript is add and remove class, you will need 3 items: HTM, CSS and JAVA SCRIP;

HTML

<div id="alpha" class="alpha">a</div>

CSS3

/*Alpha é uma class de cor inicial*/
    .alpha{
        width: 500px;
        height: 500px;
        background: #09f;
    }
    /*Beta é a class que faz a animação*/
    /*Ela sera adicionada e removida o tempo todo*/
    .beta{
        /*Nome da animação*/
        animation-name: cor;
        /*Tempo da animação 4s = 4 segundo / 0.5s = 0,50 segundos*/
        animation-duration: 4s;
    }
    /*Chama animação caso tenha class*/
    @keyframes cor{
        0% {background: #09f;}
        50% {background: #f00;}
        100% {background: #09f;}

    }

SCRIPT

//Define o elemento como uma variavel Global
    var elemento = document.getElementById("alpha");

    //Função principal
    function funcao(){
        //Loop por 5s setInterval(function(){}, 5000);
        setInterval(function(){ 
            //Linha abaixo é bom para verificar no console, F12 do teclado
            console.log("time");

            //Remove a class Beta
            elemento.classList.remove("beta");
            //Da um tempo de 1s para adicionar a Class Beta novamente
            setTimeout(adicionar, 1000);

        }, 5000);
    }
    //Função que adiciona a class
    function adicionar(){
        elemento.classList.add("beta");
    }

    //Chama a função principal
    window.onload = funcao();

Remember that the has to be the last content, because if not it has a chance not to find the div in the document, can have a practicalityMair using the jQuery api and some other interface control.

Good luck and good studies with your wish =D