0

É possível executar uma função apenas no javascript sem utilizar o HTML ? Quero que o script procure a id de um botão no html e que a função onclick apareça apenas no código interno do script, sem que seja necessário chama-la nos atributos do botão como por exemplo " " É possível ?

var play;
var controle = document.getElementById('button');

controle.onclick = function teste()
{

  if(document.getElementById("button").value == "Play")
 {
  document.getElementById("button").value = "Pause";
  play = setInterval(trocaBanner,4000);
 } 
 else
 {
  document.getElementById("button").value = "Play";
  clearInterval(play);
 }

}
<section class="banner">
      <figure>
       <input type="button" id="button" value="Play" />
       <img src="img/destaque-home.png" alt="Promoção : Big City Night"/
 </figure>
</section>

2
  • Cara eu acho que você poderia dar uma descrição mais ampla para o que você quer fazer. Edite a pergunta e coloque o contexto do que você tem, o que você quer fazer e como você espera que funcione, porque da forma como está a gente não tem nenhum contexto do que está acontecendo... Commented 30/03/2019 às 21:57
  • Editei a pergunta, pode me ajudar ?
    – Luis
    Commented 31/03/2019 às 16:35

2 Respostas 2

0

Você consegue incluir um listener de um evento direto no elemento sem precisar incluir o atributo onclick no HTML da seguinte forma:

let play
let elemento = document.getElementById('button')

function handle (e) {
  if(document.getElementById("button").value == "Play") {
    document.getElementById("button").value = "Pause"
    play = setInterval(trocaBanner,4000)
    return
  } 

  document.getElementById("button").value = "Play"
  clearInterval(play)
}

elemento.addEventListener('click', handle)

Desta forma você não vai estar modificando o HTML e não vai estar inserindo um novo atributo. Veja o teste aqui

7
  • let é um tipo de variável ? este "e" que você colocou entre parenteses se refere ao elemento "ID" ? sua solução é perfeita, mas por favor me ajude a entender como faço algo assim : </br> document.querySelector('#button').onclick = function() { // tratamento do evento };
    – Luis
    Commented 31/03/2019 às 17:06
  • Seu código não funciona fora do JSFiddle
    – Luis
    Commented 31/03/2019 às 17:25
  • let é uma variável. Segundo w3schools -> w3schools.com/jS/js_let.asp ela é uma variável de escopo somente acessível ao bloco a que pertence ex: { let a=0; }.
    – brunox99x
    Commented 1/04/2019 às 4:11
  • let é a versão 2015 do Javascript... Já está funcionando em todos os browsers maiores em suas últimas versões. Você pode substituir pelo var também, a diferença é que let é preso ao escopo do bloco enquanto var é declarado fora do escopo do bloco Commented 1/04/2019 às 19:04
  • Este código deve funcionar em qualquer lugar desde que esteja atualizado. Qual é o browser que você está atendendo ao fazer essa funcionalidade? Commented 1/04/2019 às 19:05
0

Oi pelo que entendi você quer tudo no onclick do botão, direto na tag.

No seu javascript a função de tocar banner e as variáveis para controle se quiser declara-las:

    var inExecution = false;
    var play;       
    function trocaBanner()
    {
        console.log("baner");
    }

No seu HTML:

    <section class="banner">
      <figure>
       <input type="button" id="button" value="Play" onclick="(inExecution ? (clearInterval(play), (this).value='Play', inExecution=false) : (play = setInterval(trocaBanner, 4000), (this).value='Pause', inExecution=true));" />
       <img src="img/destaque-home.png" alt="Promoção : Big City Night"/
    </figure>
   </section>

Note que fiz um if ternário no evento onclick do botão para executar todas as funções.

Se quiser colocar em um evento no JS faça:

   window.onload = function() {
        var inExecution = false;
        var play;
        var elemento = document.getElementById('button');

        function trocaBanner() {
            console.log("baner");
        }

        elemento.addEventListener('click', function handle (evt) {
            if(inExecution) {
                elemento.value = "Play";
                clearInterval(play);
            } else {
                elemento.value = "Pause";
                play = setInterval(trocaBanner, 4000);
            }
            inExecution = !inExecution;
        });
    };

Note que coloquei dentro de window.onload para que a função addEventListener só adicione o evento ao botão após sua pagina ser carregada. Caso contrário você deverá colocar o script depois do botão para que funcione.

2
  • Não, quero fazer o contrário ao invés de colocar a chamada onclick no html, quero coloca-la e manipular ela apenas no script, entende ?
    – Luis
    Commented 31/03/2019 às 16:38
  • Beleza coloque um addEventListener dentro de um window.onload veja como fica.
    – brunox99x
    Commented 1/04/2019 às 4:08

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 .