0

Objetivo

Substituir o conteúdo do elemento <P> por um novo texto ao clicar em um botão.

Problema

Sempre que a página carrega, o javascript executa a função e altera o texto sem que o botão seja clicado.

Tentativa de solução

Aloquei os Id em variáveis e criei uma função que incluiria o texto hello world no parágrafo, fora da função chamei a variável btn (botão) incluí o onclick e atribuí a função 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();

Agradeço a ajuda de antemão.

1
  • Não precisa colocar "resolvido" no título nem adicionar o código na pergunta (pois o mesmo já se encontra na resposta abaixo e é redundante colocá-lo aqui). Ao aceitar uma resposta (clicando no ✔️) vc já indicou que o problema está resolvido
    – hkotsubo
    Commented 25/10/2019 às 0:17

3 Respostas 3

2

Retire a chamada da função btn.onClick = mudaTexto(); do código do script e atribua-o diretamente no botão, assim:

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

Dessa forma você está adicionando o evento de clicar diretamente ao botão.

0
2

O problema é que você não está atribuindo a função ao evento onclick, mas sim invocando a função. Além disso, há também um erro de digitação. Veja:

btn.onClick = mudaTexto();

O que você precisa fazer é, mudar onClick para onclick e parar de executar a função durante a atribuição:

btn.onclick = mudaTexto;

Desse modo, você estará atribuindo a função ao listener do evento, e não o seu resultado, como estava sendo feito anteriormente.

4
  • 1
    Não vai dar certo. Não é onClick, mas sim onclick. Commented 24/10/2019 às 22:41
  • Erro de digitação... Obrigado! :) Commented 24/10/2019 às 22:42
  • Quando eu retiro os parênteses o código não funciona, já com os parênteses o javascript executa a função assim que carrega a page, o botão só funciona corretamente quando eu chamo a função diretamente na tag button, mas quero saber como executar no próprio código.
    – Misaell
    Commented 24/10/2019 às 23:06
  • Edite sua pergunta com os códigos que foram passados aqui, se você quiser, podes colocar o que passei, para nós analisarmos melhor. Commented 24/10/2019 às 23:16
1

Na verdade, havia um erro de sintaxe. Corrigi, veja a demonstração abaixo:

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>

4
  • 1
    Erro de sintaxe e o fato de estar executando a função na atribuição. Não se trata somente de um erro. Commented 24/10/2019 às 22:43
  • Quando eu retiro os parênteses o código não funciona, já com os parênteses o javascript executa a função assim que carrega a page, o botão só funciona corretamente quando eu chamo a função diretamente na tag button, mas quero saber como executar no próprio código.
    – Misaell
    Commented 24/10/2019 às 23:07
  • Você clicou no botão azul acima "Executar" e testou? Commented 24/10/2019 às 23:19
  • Agora percebi meu erro, escrevi "onClick" no lugar de "onclick". Agora funciona corretamente.
    – Misaell
    Commented 24/10/2019 às 23:28

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 .