OnClick button does not respond

Question

Hello, I’m starting to study JS, I decided to make this simple page testing some features, but I don’t understand why the button "Alert!" not be returning Alert('clicked button'); from now on I appreciate any help.

Course of JS Alert!

<script>
    var btnElement = document.querySelector('button.botao');

    btnElement.onClick = function() {
       alert('Botao clicado');
    }
</script>

Answer 1

You have to use an addeventlistener to monitor the button click event, in it you pass the event type and the function that is called

Answer 2

According to @Rafael Costa’s answer "You have to use an addeventlistener to monitor the button click event, in it you pass the type of event and the function that is called".

---

addeventlistener(event, function[, optional]);

The first parameter is the event type (such as " click" or " mousedown" or any other HTML DOM event .)

The second parameter is the function we want to call when the event occurs.

The third parameter is optional and is well explained in this link.

Note that you do not use the prefix "on" for the event; use "click" instead of " onclick".

document.querySelector('button.botao').addEventListener("click", MarcusVinicius);

function MarcusVinicius() {
  alert("Botao clicado exemplo 1");
}
   

<button class="botao">Click me</button>

Second example

var btnElement = document.querySelector('button.botao');
                                    
btnElement.addEventListener("click", function() {
    alert('Botao clicado exemplo 2');
});

<button class="botao">Click me</button>

Third example

var btnElement= document.querySelector("button.botao"); // Acessando o botão // 
btnElement.addEventListener("click", MarcusVinicius); //chamando a função MarcusVinicius quando o evento click ocorrer //

function MarcusVinicius(){ 
alert('Botao do terceiro exemplo clicado');
};

   

<button class="botao">Click me</button>