0

Estou utilizando este código porém a partir do onclick ele não funciona se eu clicar no elemento "fa-search", porém se eu colar o mesmo JS no console do chrome ele funciona da forma esperada.

Gostaria de saber o porque? Eu imagino que é algo que estivesse relacionado a escopo.

onload = (() => {
    console.log("agua");	
    document.getElementsByClassName("fa-search")[0].onclick = () =>{
      document.getElementById("fieldSearch").focus();
      console.log("Executou");
    }
})();
<html>

<head>
    <script defer src="https://use.fontawesome.com/releases/v5.6.1/js/all.js" integrity="sha384-R5JkiUweZpJjELPWqttAYmYM1P3SNEJRM6ecTQF05pFFtxmCO+Y1CiUhvuDzgSVZ" crossorigin="anonymous"></script>
</head>

<body>    
    <aside id="container">
        <header>Encontre um ponto de venda</header>
        <p>Digite o seu CEP, rua, bairro ou cidade</p>
        <div class="search">           
            <input type="text" id="fieldSearch">
            <i class="fas fa-search"></i>            
        </div>

        <div id="proximidade">
            <ul>
                <li>
                    <button>5 KM</button>
                </li>
                <li>
                    <button>10 KM</button>
                </li>
                <li>
                    <button>15 KM</button>
                </li>
            </ul>
        </div>

        <div id="block-list">                
            <i class="fas fa-list"></i>
            <span>Lista</span>            
        </div>
    </aside>
</body>
<link rel="stylesheet" type="text/css" href="Dist/my-styles.css" />
<script src="../Sass/js/mapa.js"></script>
</html>

16
  • 1
    Funciona normalmente, acho que você está se confundindo em outra ponto do seu código. Commented 17/12/2018 às 12:22
  • Como assim fernando, não entendi direto, me desculpe, porque pelo menos na versão do chrome aqui não está funcionando isto não.
    – rock.ownar
    Commented 17/12/2018 às 12:26
  • Abri agora no Chrome 70 e no Firefox 63 o link que eu comentei com seu código está funcionando normalmente. Ao clicar no elemento o input ganha foco e é logado "Executado" no console. Commented 17/12/2018 às 12:29
  • Inclusive acabei de pegar este mesmo código e para o evento de clique funcionar eu tenho que copiar o js, e colocar no console, ai eu posso voltar e clicar lá na lupa, você chegou a clicar na lupa?
    – rock.ownar
    Commented 17/12/2018 às 12:29
  • Você chegou a abrir o link que eu coloquei no primeiro comentário? Commented 17/12/2018 às 12:30

2 Respostas 2

0

Galera, achei uma forma de resolver, acabei incluindo o código inline mesmo:

<i class="fas fa-search" onclick="nomedafuncaoquetornaclicavel()"></i>   
0

Primeiramente seria melhor você usar o método Element.addEventListener() para escutar eventos, os métodos onevento são antigos e permitem apenas um handler de evento no elemento.

Ex.:

let elemento = document.getElementById('meu-elemento')
elemento.onclick = minha_funcao

Ficaria:

let elemento = document.getElementById('meu-elemento')
elemento.addEventListener('click', minha_funcao)

Então, no seu caso você poderia usar:

window.addEventListener("load", function(event) {
    console.log("Página carregada");
});

Você também precisa entender que quando você usa Immediately Invoked Function Expression a variável vai receber o resultado da função, e não uma função (que é o que se espera receber como um handler de eventos).

Ex.:

let valor_1 = (function(){ return 'Função 1'; })()
let valor_2 = function(){ return 'Função 2'; }

console.log(valor_1)
console.log(valor_2)
console.log(valor_2())

Mesmo aplicando os conceitos anteriores você teria problemas, pois o script está usando o atributo defer. Você teria que escutar o evento DOMContentLoaded para que sua função execute depois do script ser executado.


Agora, o ponto principal é que você está criando um script que serve apenas para dar foco num input quando já existe um elemento que faz isso nativamente para você, o <label>.

<label>
  <input type="search">
  Click
</label>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .