Javascript performs the function without the button being clicked

Question

Goal

Replace the content of the widget <P> by a new text by clicking a button.

Problem

Whenever the page loads, the javascript executes the function and changes the text without the button being clicked.

Attempt to resolve

I housed the Id variables and created a function that would include the text hello world in the paragraph, outside the function called the variable btn (button) includes the onclick and assigned the function mudaTexto.

HTML

<style>
  .lol{
    border: 1px solid black;
    width: 150px;
    height: 35px;
}
</style>

<button id="btn1">1</button>

<br><br>

<div class="lol">
  <p id="teste">hhh</p>
</div>

JS

let btn = document.getElementById('btn1');
let texto = document.getElementById('teste');

function mudaTexto(){
texto.innerText = 'hello world';
}

btn.onClick = mudaTexto();

I appreciate the help beforehand.

Answer 1

Remove the call from the function btn.onClick = mudaTexto(); of the script code and assign it directly on the button, thus:

<button id="btn1" onclick="mudaTexto();">1</button>

This way you’re adding the direct click event to the button.

Answer 2

The problem is that you are not assigning the function to the event onclick, but by invoking the function. In addition, there is also a typo. See:

btn.onClick = mudaTexto();

What you need to do is, change onClick for onclick and stop executing the function during the assignment:

btn.onclick = mudaTexto;

In this way, you will be assigning the function to the Listener of the event, not its outcome, as was being done previously.

Answer 3

Actually, there was a syntax error. I fixed it, see the demo below:

let btn = document.getElementById('btn1');
let texto = document.getElementById('teste');

function mudaTexto(){
texto.innerText = 'hello world';
}
//Erro de sintaxe:
//btn.onClick = mudaTexto();

//Sintaxe correta:
btn.onclick = mudaTexto;

<style>
  .lol{
    border: 1px solid black;
    width: 150px;
    height: 35px;
}
</style>

<button id="btn1">1</button>

<br><br>

<div class="lol">
  <p id="teste">hhh</p>
</div>