problems with color change through javascript

Question

problems with color change through javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a javascript problem where every time I change 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 HTML:

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

javascript html

asked by anonymous 13.06.2018 / 00:44

2 answers

Laravel - Website and API Authentication [closed] Use of the comma in Python [duplicate]

score 1 · Answer 1

You are redeclaring the variable cor within the function, and thereby lose access to the external scope variable. Do so (I took advantage 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 CSS.

score 0 · Answer 2

If I understand correctly, you want a background loop, well it has a function in CSS3 that can do this for you, but can you imagine how this can help me? Well you can do with JavaScript is to 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();

Good luck and good studies with your desire = D