Entrar Ainda não tem acesso?
3
respostas

Chamar mais de 1 button

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

por Julio Fallace
| 15.4k xp | 4 posts

Olá. Alguém sabe como faço pra poder chamar um segundo botão no html pelo javascript? Sei que, se tenho a tag < button >texto< /button > eu consigo chamar normalmente escrevendo no script:

var botao = document.querySelector("button"); button.onclick = (aqui eu chamo uma função desejada).

O problema é quando tenho mais de um botão na página, ou seja, mais de um < button > , daí ao chamar o botão por document.querySelector("button") o programa não sabe de qual < button > estou falando. Alguém sabe me ajudar? tenho horas tentando.

Como neste codigo:

<meta charset="UTF-8">

<input/>
<button class = "btn">Teste botão 1</button>
<button class = "btn">teste botão 2</button>

<script>

    function botao(){
        alert("funciona");
    }
    function botao2(){
        alert("Nao funciona!!");
    }


    var button1 = document.querySelector("button");
    button1.onclick = botao; 

    var button2 = document.querySelector("button");
    button2.onclick = botao2;

</script>

Como tenho 2 button no HTML, do jeito que está aí dá um bug no codigo. Queria executar a função botao() no primeiro button, e executar a função botao2() no segundo button.. alguém me ajuda?

3 respostas
por Julio Fallace
| 15.4k xp | 4 posts

Como neste codigo:

<meta charset="UTF-8">

<input/>
<button class = "btn">Teste botão 1</button>
<button class = "btn">teste botão 2</button>

<script>

    function botao(){
        alert("funciona");
    }
    function botao2(){
        alert("Nao funciona!!");
    }


    var button1 = document.querySelector("button");
    button1.onclick = botao; 

    var button2 = document.querySelector("button");
    button2.onclick = botao2;

</script>

Como tenho 2 button no HTML, do jeito que está aí dá um bug no codigo. Queria executar a função botao() no primeiro button, e executar a função botao2() no segundo button.. alguém me ajuda?

por Filipe
| 293.6k xp | 93 posts
Software Developer

Olá Julio, nesse caso você precisa adicionar um id em cada botão:

<meta charset="UTF-8">

<input/>
<button id= "btn1">Teste botão 1</button>
<button id= "btn2">teste botão 2</button>

<script>

    function botao(){
        alert("funciona");
    }
    function botao2(){
        alert("Nao funciona!!");
    }


    var button1 = document.querySelector("#btn1");
    button1.onclick = botao; 

    var button2 = document.querySelector("#btn2");
    button2.onclick = botao2;

</script>
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Júlio para diferenciar um elemento de outro no html você atribui um identificador único para aquele elemento fazemos isso com o seletor de id, que funciona basicamente assim. Você adiciona o código:

<button id= "btn_principal"> Botão Principal </button>
<button id= "btn_secundario"> Botão Principal </button>

Com esse identificador único na tag do nosso botão, podemos nos referenciar a ele utilizando o #`.

var button1 = document.querySelector("#btn_principal"); button1.onclick = botao; 

var button2 = document.querySelector("#btn_secundario");
button2.onclick = botao2;

Com o seletor que você usou que é o seletor de classe, isso não é possível pois com o seletor de classe, geralmente nos referenciamos a um conjunto de elementos(mais de um).

Espero ter ajudado e bons estudos.