How to call a function through a button using querySelector?

Asked

Viewed 91 times

-2

Good afternoon, you guys! I need an Alert to appear when I click on a button, but nothing I try worked. Follow the code snippet:

function alerta(){
         alert("Este é um alerta");
}

Var botão = document.querySelector(".button_menu");

botão.onclick = alerta;
// não exibe o alerta, porém com os parênteses () no final exibe ao carregar a página, não ao clicar. //

Please help me out. Vlw!!

javascript

  • use botão.addEventListener("click", alerta);, and avoid names with accents, try using only botao

  • Ricardo Punctual, vlw man, I’ll try here!

  • 3

    @Davidartagnan Your logic is correct and better than the answer given. The only thing is that you put Var with V uppercase. Just solve this and the code will work, but be careful when making the assignment in the onclick anyway. Always prefer addEventListener to avoid generating side effects on the application.

3 answers

3

Are you using the Var with the first capital letter.

function alerta() { alert("Este é um alerta"); }

var botão = document.querySelector(".button_menu");

botão.onclick = alerta;
<button class="button_menu">Alert</button>

  • Thank you very much, it worked out here!!✌

  • 1

    @Renan The negative is consistent with the original version of the answer, but it seems that it has already been removed by the author

0

In your example, the error was the letter 'v', uppercase. When you add the parentheses '()' to the function name, you are invoking it 'alert()'. When you do not add them, if you are passing/accessing the function by reference.

0

Your code is correct, except for the syntax error in Var, that would be all in tiny: var. Note the Javascript syntax, which differentiates upper-case from lower-case letters. When using Var the program does not recognize the command and returns the error: Uncaught SyntaxError: Unexpected identifier (it is always good to look at the console to view possible errors in the code).

On the question of adding the () in the assignment and trigger function Alert, it occurs because the code that comes after the assignment operator = is executed as soon as it is read, ie when doing:

botão.onclick = alerta();

Will simply execute the function alerta() and nothing else. It would be the same as just putting alert();.

The onclick calls an anonymous function this way:

botão.onclick = function(){}

How you created a function alerta(), you can replace the block function(){} the name of the function, without the (), just as you did:

botão.onclick = alerta;

This way you are assigning the function to the event onclick, and not running it, because the variable alerta is already a function and you are assigning it by reference.

See the difference between the two things:

alerta(); -> com parênteses: executa a função
alerta;   -> sem parênteses: referencia ao valor na variável "alerta"

Now, as they said in the comments, avoid accents in variables: use botao instead of botão (see a topic regarding this).

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.