Solucionado (ver solução)

Solucionado
(ver solução)

7
respostas

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

05/01/2022

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

05/01/2022

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

05/01/2022

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

05/01/2022

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

05/01/2022

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

05/01/2022

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

05/01/2022

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