Entrar Ainda não tem acesso?
1
resposta

consolidando conheciminto

Referente ao curso JavaScript: manipulando o DOM, no capítulo Interagindo com uma página e atividade Consolidando o seu conhecimento

por THIAGO BERNARDES DA SILVA
| 54k xp | 17 posts

meu codigo faz as alteração todo vez que clico em qualquer lugar da pagina, mas quero que ocorra apenas com clique no botao.


addEventListener('click', fuiClicado)


function fuiClicado(){ 
  const clique = document.querySelector('.page-calcular-calcular')
  clique.innerHTML = 'NOTAS ENVIADAS'
  var botao = document.createElement('button');//cria o elemento
  botao.type = 'button' // defino o tipo do elemento
  botao.innerHTML = 'Parabéns voce esta avancando' // define o texto do elemento 
  botao.className = 'parabens' // definie uma classe que deve ser criada tabem no css para estilizalçao
  document.querySelector('.container').appendChild(botao) // designa qual o elemento pai dessa novo elemento

}
1 resposta
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá Thiago, tudo bem?

Ao analisarmos seu código, a função responsável por executar o trecho de código no qual coloca um texto no HTML, passa as mensagens além de outros comandos, que é a fuiClicado, é executada a cada clique, ou seja basta clicar que ela será executada, observe o trecho que será necessário apagar no script.js que vai resolver parte do erro.


addEventListener('click', fuiClicado) // Apagar essa linha de código


function fuiClicado(){ 
/*============RESTANTE DO CÓDIGO===========*/

o addEventListener “escuta” um evento e como ele é executado, logo no começo ele acaba que “escuta” o clique, ou seja, qualquer clique na tela vai executar a função fuiClicado.

Depois de apagar esse trecho de código, podemos selecionar um evento de clique, ou seja, quando o botão, somente o botão for clicado será executado a função fuiClicado() observe o arquivo HTML:

  <div class="container">

        <h1 class="page-title">
            Manipulando elementos no DOM</h1>

        <button id="calcular" onclick="fuiClicado()">Enviar notas</button> // Observe o comando onclick

        <h1 class="resultado"></h1>

        <h2 class="resultado"></h2>

    </div>

Desse modo, ao clicarmos no botão a função é executada com êxito.

Espero ter ajudado, mas caso surjam dúvidas a respeito, me coloco à disposição para lhe ajudar!

Sucesso

Abraços e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!