Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Código ignora o "addEventListener"

por Jorbralyson Freire de Oliveira Ribeiro
| 62.2k xp | 22 posts

Não entendi porque o código executa todas as funções corretamente e apenas ignora o EnventListener. A função "adicionaClasse()" deveria ser acionada pela função "buttonFocous()" apenas quanto acionado click no botão, mas essa unica parte do código esta sendo inorada sem apresentar nenhum erro, o que poderia ser?

let mainMenu = {
    fullMenu: document.querySelector("#mainmenu"),
    bCast: document.querySelector("#cast")
}
function adicionaClasse(elemento, classe){
    let e = elemento.classList.add(classe);
    console.log("cliquei");

}
function buttonFocous(b){
    b.addEventListener('click', adicionaClasse(b, "button-onfocous"));
    console.log (" on focous");

    return 0;
}

buttonFocous(mainMenu.bCast);

ps. O evento funcionava normalmente antes de transformá-lo em funções

8 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Jorbralyson tudo bem?

Poderia postar o código completo para eu poder analisar?

por Jorbralyson Freire de Oliveira Ribeiro
| 62.2k xp | 22 posts

tem o css 

.button {
   color: red;
}
.button-onfocous {
   color: blue;
}

e o html

<body>
    <nav id="mainmenu" class="menu">

        <button id="cast" class=button>
            CAST</button>

    </nav>

    <br> <br>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <font color="white">rodapé</p>

    <script src="main.js"></script>
</body>

No javascript é isso mesmo.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Vamos lá!

A primeira coisa que acontece quando a página carregada é a linha 

buttonFocous(mainMenu.bCast);

que chama a função buttonFocous(b) que chama a função adicionaClasse .

Eu acho que essa não é a ordem que você queria que acontecesse.

Ainda tem o código anterior que funcionava ? Para eu olhar o que queria fazer e tentar consertar.

Eu pessoalmente não gosto de usar addEventListener.

Prefiro usar os gatilhos do DOM. Exemplo:

botao=document.getElementById("botao");
botao.setAttribute("onclick","myFunction()");

Fica muito mais fácil de depurar o código porque o evento fica gravado no DOM e não costuma dar erro.

por Jorbralyson Freire de Oliveira Ribeiro
| 62.2k xp | 22 posts

Teria q refazer, mas o objetivo é quando acionar o evento adicionar uma class ao elemento, essa parte ta funcionando ainda, a ordem também acredito estar certa, uma vez que a primeira função serve pra escutar o evento e a segunda serve pra executar a ação (adicionar a classe), O problema é que a função: 

adicionaClasse(b, "button-onfocous")

só deveria ser ativada quando o botão for clicado e esta sendo ativa assim que a pagina é carregada.

Testarei se essa outra forma que você mostrou traz o mesmo bug ou não.

por Jorbralyson Freire de Oliveira Ribeiro
| 62.2k xp | 22 posts
mainMenu.bCast.setAttribute("onclick", mainMenu.bCast.classList.add("button-onfocous"))

não funcionou não função e nem desse forma, o que tem de errado?

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

É que você não pode passar uma chamada de função dentro do event listener porque se passar ele executa.

Você tem que passar a definição da função exemplo:

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});
</script>

</body>
</html>

Aqui nesse exemplo ao clicar no botão chama a função definida na hora. E funciona ok aparecendo o Hello World na página.

Mas nesse exemplo abaixo:

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>

function teste(){
  document.getElementById("demo").innerHTML = "Hello World";
}
document.getElementById("myBtn").addEventListener("click", teste());
</script>

</body>
</html>

O addEventListener executa a função teste assim que executada a função. Por isso não gosto do addEventListener porque não consigo passar uma função com paramêtros.

É que eu não entendi bem o que o seu código faz por isso não consigo escrever um exemplo para você. Você poderia descrever o que seu código faz para eu exemplificar para você?

Aqui está um exemplo de como eu gosto de programar:

<button id="botao">Clique me</button>

<script>
  function OlaMundo(){
    alert("Olá mundo!!!!");
  }

  botao=document.getElementById("botao");
  botao.setAttribute("onclick","OlaMundo()");

</script>
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Voltei,

Entendi o que quis fazer (pelo menos eu acho). É que em SP tá muito calor (37ºC) e isso tá fritando meu cérebro kkkkk.

Dá uma olhada como ficaria o código que sugeri, dá forma mais simples e usando função.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>
        .button {
            color: red;
        }

        .button:focus {
            color: blue;
        }
    </style>
    <script id="main.js">

        function main() {
            b = document.getElementById("cast");
            b.setAttribute("onfocus", "console.log('on focus');");
            b.setAttribute("onclick", "console.log('cliquei');");
        }
    </script>
</head>

<body onload="main();">
    <nav id="mainmenu" class="menu">

        <button id="cast" class=button>
            CAST</button>

    </nav>

    <br> <br>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <font color="white">rodapé</p>


</body>

</html>

Existe um atributo css para aplicar efeitos quando o elemento recebe foco é .button:focus . Coloquei ele para você.

Joguei o script para cima e coloquei no body onload chamando a função do script main() dessa forma ele não vai acionar antes do body estar totalmente carregado. É só um exemplo didático de como eventos funcionam se quiser jogar o script pra baixo também funcionaria.

Coloquei dentro da função main que é chamada quando a página carregada todas as coisas necessárias. Como as funções só tinha uma linha de comando não criei funções para os console logs, mas isso poderia ser feito sem problemas.

Espero ter ajudado e estou por aqui se quiser tirar dúvidas.

por Jorbralyson Freire de Oliveira Ribeiro
| 62.2k xp | 22 posts

Resolvido! Obrigado, foi de grande ajuda.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software