1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button type="button">click</button>
  <p></p>

  <script>
  
    var botao = window.document.getElementsByTagName("button")[0];
    var paragrafo = window.document.getElementsByTagName("p")[0];

    botao.onclick = function() {
      paragrafo.textContent = "Você clicou!";
    };

    botao.onclick = function() {
      window.alert("Você clicou!");
    };

  </script>

</body>
</html>

Então tenho este código o meu problema é que o primeiro onclick não funciona apenas o segundo onclick, porque isso tá acontecendo e tem como executar os dois?

0

2 Respostas 2

4

Neste, caso você está usando dois onclick, então basicamente o segundo onclick que você definiu sera o que vai ser executado o segundo onclick vai substituir o primeiro, assim o primeiro onclick não executara apenas o segundo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button type="button">click</button>
  <p></p>

  <script>
  
    var botao = window.document.getElementsByTagName("button")[0];
    var paragrafo = window.document.getElementsByTagName("p")[0];

    botao.onclick = function() {
      paragrafo.textContent = "Você clicou!";
    };

    botao.onclick = function() {
      window.alert("Você clicou!");
    };

  </script>

</body>
</html>

Para isso não acontecer use em vez de onclick use o addEventListener, assim você podera chamar quantos evento de click você quiser!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button type="button">click</button>
  <p></p>

  <script>
  
    var botao = window.document.getElementsByTagName("button")[0];
    var paragrafo = window.document.getElementsByTagName("p")[0];

    botao.addEventListener("click", function() {
      paragrafo.textContent = "Você clicou!";
    });

    botao.addEventListener("click", function() {
      window.alert("Você clicou!");
    });

  </script>

</body>
</html>

2

No Javascript puro o onClick é usado da seguinte forma:

botao.addEventListener("click", function(){
      alert('clicado!');
});

Caso tenha mais dúvidas link para referência: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .