Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Posso usar duas tag <button> e programar dois botões diferentes?

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Campo de texto e botão

por Matheus Souza Almeida
| 28k xp | 6 posts

OLá! Estava reforçando os conhecimentos do curso em um programa pessoal para execução de cálculos matemáticos, quando me deparei com o problema de que não consigo programar duas tag´s "button" em JavaScript, como faço para resolver o problema, pois tentei colocar uma tag como "button" e outra como "button1", a programação funcionou porém a exibição do "button1" no Chrome ficou sem o contorno de botão, apenas a parte escrita. Segue o código:

<meta charset="utf-8">

<h1> CALCULADORA </h1>
<h3> QUAL CÁLCULO DESEJA FAZER?</h3>

<h4>Fórmulas de matemática</h4>

<h5>Área</h5>

<button>Retângulo / Paralelogramo</button>
<button1>Quadrado</button1>

<script type="text/javascript">

    function Area_retangulo(){

        var base = parseFloat(prompt("Qual o valor da base?"));
        var altura = parseFloat(prompt("Qual o valor da altura?"));
        alert("O valor da área é " + (base * altura));
    }
    var bot_ret = document.querySelector("button");
    bot_ret.onclick = Area_retangulo;

    function Area_quadrado(){

        var lado = parseFloat(prompt("Qual o valor do lado?"));
        alert("O valor da área é " + (lado * lado));
    }
    var bot_quadrado = document.querySelector("button1");
    bot_quadrado.onclick = Area_quadrado;
</script>
7 respostas
por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Olá Matheus, tudo bem? Você pode explicar melhor o que exatamente não funcionou? Poderia compartilhar o código com o erro?

Se adiantar, o que você pode fazer para que cada botão funcione com um evento diferente é isso:

<button onclick="suaFuncaoCalcularAreaRetangulo()">Retângulo</button>
<button onclick="suaFuncaoCalcularAreaQuadrado()">Retângulo</button>

Até mais!!

por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Entendi Matheus, vamos lá:

<button> é o nome da tag dada a todos os botões, para você adicionar um evento em um em particular você precisa criar uma id para ele:

<button id="button1">Quadrado</button>

Para você utilizá-lo terá que usar o query selector dessa maneira:

var bot_quadrado = document.querySelector("#button1");

Lembrando que para pegar o id com o querySelector, você precisa obrigatoriamente utilizar o #. Outra opção seria assim:

var bot_quadrado = document.getElementById("button1");

Após isso você conseguirá adicionar um evento de click assim:

bot_quadrado.onclick = suaFuncao;

Espero ter ajudado, Qualquer dúvida só postar aqui, até mais!!

por Matheus Souza Almeida
| 28k xp | 6 posts

No código abaixo quando eu clico no botão "QUADRADO' não acontece as ações da função de "AREA_QUADRADO", mas quando eu clico no botão "RETÂNGULO / PARALELOGRAMO" é executada a função "AREA_QUADRADO" e não a função "AREA_RETANGULO".

Acredito que seja por causa da Tag "BUTTON", pois ficam igual na linha em que uso o "Document.querrySelector("button")"...

Esse código que você colocou como solução devo usar no mundo HTML? Pois não consegui fazer funcionar.

`

CALCULADORA

QUAL CÁLCULO DESEJA FAZER?

Fórmulas de matemática

Área

`

Muito Obrigado!

por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Descarta a minha primeira resposta, eu estava sem o contexto, no seu caso, como você está usando querySelector('button'). Ele só vai pegar a primeira ocorrência do botão. Você deve declarar os dois botões no html cada um com seu id especifico:

<button id="ret">Retângulo</button>
<button id="quad">Quadrado</button>

No seu script você irá chamar cada um pelo seu id, dessa maneira:

var ret = document.querySelector("#ret");
var quad = document.querySelector("#ret");

Atente-se ao uso do # dentro do querySelector.

Em seguida você criará o evento de click em cada um:

ret.onclick = calculaRetangulo; 
quad.onclick = calculaQuadrado;
solução!
por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Seu código alterado para funcionar:

<head>
<meta charset="utf-8">
</head>

<h1> CALCULADORA </h1>
<h3> QUAL CÁLCULO DESEJA FAZER?</h3>

<h4>Fórmulas de matemática</h4>

<h5>Área</h5>

<button id="ret">Retângulo</button>
<button id="quad">Quadrado</button>

<script type="text/javascript">

    function Area_retangulo(){

        var base = parseFloat(prompt("Qual o valor da base?"));
        var altura = parseFloat(prompt("Qual o valor da altura?"));
        alert("O valor da área é " + (base * altura));
    }
    var bot_ret = document.querySelector("#ret");
    bot_ret.onclick = Area_retangulo;

    function Area_quadrado(){

        var lado = parseFloat(prompt("Qual o valor do lado?"));
        alert("O valor da área é " + (lado * lado));
    }
    var bot_quadrado = document.querySelector("#quad");
    bot_quadrado.onclick = Area_quadrado;
</script>

Espero ter ajudado, até mais!!

por Matheus Souza Almeida
| 28k xp | 6 posts

Muito obrigado Marcus Cesar!

Consegui arrumar aqui, e deu tudo certo, agora vou continuar o programa.

Até mais!!

por Marcus Cesar Hüsemann Filho
| 165.4k xp | 50 posts

Por nada Matheus! Qualquer dúvida é só chamar!! Até mais!