Why does my onclick on an onload not work?

Navigation
0

I'm using this code however from onclick it does not work if I click on the "fa-search" element, however if I paste the same JS into the chrome console it works as expected.

I wonder why? I imagine it's something that is scope related. 

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>
    
asked by anonymous 17.12.2018 / 13:14

2 answers

0

Well, I found a way to solve it, I ended up including the same inline code: 

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

First of all, you'd better use Element.addEventListener() to listen to events , onevento methods are old and only allow an event handler in the element.

Ex: 

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

I would stay: 

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

So, in your case you could use: 

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

You also need to understand that when you use Immediately Invoked Function Expression the variable will receive the result of the function, not a function (which is expected to be received as an event handler ).

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())

Even if you apply the above concepts you would have problems because the script is using the defer . You would have to hear the DOMContentLoaded event for your function to run after the script is executed.

Now, the main point is that you are creating a script that is only meant to focus on an input when there is already an element that does this natively for you, <label> . 

<label>
  <input type="search">
  Click
</label>
    
17.12.2018 / 14:21
Regular expression to get the third part of a paragraph in HTML How to eliminate noise in an image?