1

Tenho dois botões, um é Maior e o outro é Menor pra me retornar o seguinte:

Tenho dois campos onde digito um valor em cada. O primeiro botao (maior) tem que me retornar qual dos dois números é o maior e o segundo botão tem que me retornar qual dos dois números é o menor, mas não estou conseguindo aninhar as condições if e else.

Segue o código abaixo:

function maiorMenor() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);
    var botao1;
    var botao2;

    if (!numero1) {
        alert("Digite o Número 1")
    }

    if (!numero2) {
        alert("Digite o Número 2")
    }
    if (numero1 > numero2) {
        alert("O número 1 é maior")
    }
    if (numero1 < numero2) {
        alert("O número 2 é maior")
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculadora Maior-Menor</title>
    <script src="js/maior-menor.js"></script>
    <link rel="stylesheet" href="css/estilo.css">
</head>

<body>
    <div class="calc-maior-menor">
        <h1>Calculadora Maior / Menor</h1>
        <div>
            <label for="">Número 1:</label>
            <input id="num1" type="number" placeholder="Número 1">
        </div>
        <div>
            <label for="">Número 2:</label>
            <input id="num2" type="number" placeholder="Número 2">
        </div>
        <div>
            <button id="botao1" onclick="maiorMenor()">Maior</button>
            <button id="botao2" onclick="maiorMenor()">Menor</button>
        </div>
    </div>
</body>

</html>

2
  • 1
    Se cada botão faz um cálculo não seria mais fácil separar em duas funçoes? Commented 9/04/2018 às 19:19
  • O que vc acha Caique? e como eu faço isso?
    – E.M C.
    Commented 9/04/2018 às 19:23

3 Respostas 3

1

Como o @CaiqueRomero disse, é melhor você separar as funções, senão vocÊ vai precisar identitifcar qual botão foi clicado antes de saber que lógica deverá ser executada.

Vai ser algo mais ou menos assim:

fucntion validar(val1, val2)
{
    if (!val1) {
        alert("Digite o Número 1")
        return false;
    }

    if (!val2) {
        alert("Digite o Número 2");
        return false;
    }

    return true;
}

function maior() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);

    if(validar(numero1, numero2)){
        if (numero1 > numero2) {
            alert("O número 1 é maior");
        } else if (numero1 < numero2) {
            alert("O número 2 é maior");
        } else {
            alert("São iguais");
        }
    }
}

function menor() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);

    if(validar(numero1, numero2)){
        if (numero1 < numero2) {
            alert("O número 1 é menor");
        } else if (numero1 > numero2) {
            alert("O número 2 é menor");
        } else {
            alert("São iguais");
        }
    }
}

No HTML, você chama uma função em cada botão:

<button id="botao1" onclick="maior()">Maior</button>
<button id="botao2" onclick="menor()">Menor</button>
1

Separei a sua função em duas: Menor() e Maior() assim cada botão chamará sua devida função.

Dentro de cada método verifico se o campo foi preenchido, caso ambos estejam preenchidos faço a comparação dos valores.

Obs.: Como você utiliza o parseInt() para verificar o preenchimento dos campos, se o valor for zero ele não será considerado como preenchido, entenda o porque:

parseInt:

Se base é undefined ou 0 (ou ausente), JavaScript assume o seguinte:

Se a string de entrada começa com "0x" ou "0X", a base é 16 (hexadecimal) e o restante da string é analisado. Se a string de entrada começa com "0", a base é oito (octal) ou 10 (decimal). Exatamente qual base é escolhida é dependente da implementação. O ECMAScript 5 especifica que 10 (decimal) seja utilizado, mas nem todos os browsers suportam isso ainda. Por essa razão sempre especifique uma base quando estiver usando parseInt. Se a string de entrada começa com qualquer outro valor, a base é 10 (decimal). Se o primeiro caracter não puder ser convertido para um número, parseInt retorna NaN.

Exemplo abaixo:

function Menor() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);

    //Verifico se os campos foram preenchidos
    if (!numero1 || !numero2) {
        alert("Preencha os dois campos.");
    }else{
      //Se foram preenchidos verifico qual é o menor
      if (numero1 < numero2)
        alert("O número 1 possui o menor valor.");
      else if(numero1 == numero2)
        alert("Os valores são iguais.");
      else
        alert("O número 2 possui o menor valor.");
    }
}

function Maior() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);

    //Verifico se os campos foram preenchidos
    if (!numero1 || !numero2) {
        alert("Preencha os dois campos.");
    }else{
      //Se foram preenchidos verifico qual é o maior
      if (numero1 > numero2)
        alert("O número 1 possui o maior valor.");
      else if(numero1 == numero2)
        alert("Os valores são iguais.");
      else
        alert("O número 2 possui o maior valor.");
    }
}
<div class="calc-maior-menor">
        <h1>Calculadora Maior / Menor</h1>
        <div>
            <label for="">Número 1:</label>
            <input id="num1" type="number" placeholder="Número 1">
        </div>
        <div>
            <label for="">Número 2:</label>
            <input id="num2" type="number" placeholder="Número 2">
        </div>
        <div>
            <button id="botao1" onclick="Maior()">Maior</button>
            <button id="botao2" onclick="Menor()">Menor</button>
        </div>
    </div>

1
  • Caique, perfeito irmão!! Deu certíssimo. Muito obrigado!!
    – E.M C.
    Commented 9/04/2018 às 19:52
0

Eu sugeriria:

<script>
function maiorMenor(metodo) 
{ 
    var numero1 = parseInt(document.getElementById("num1").value); 
    var numero2 = parseInt(document.getElementById("num2").value); 

    if (!numero1)
        alert("Digite o Número 1")

    if (!numero2)
        alert("Digite o Número 2")

    if (metodo == 'maior')
        alert("O número maior é: " + Math.max(numero1, numero2));

    else if (metodo == 'menor')
        alert("O número menor é: " + Math.min(numero1, numero2));
}

</script>

<div class="calc-maior-menor">

    <div>
        <label for="">Número 1:</label>
        <input id="num1" type="number" placeholder="Número 1">
    </div>
    <div>
        <label for="">Número 2:</label>
        <input id="num2" type="number" placeholder="Número 2">
    </div>
    <div>
        <button id="botao1" onclick="maiorMenor('maior')">Maior</button>
        <button id="botao2" onclick="maiorMenor('menor')">Menor</button>
    </div>
</div>

JSFIDDLE: https://jsfiddle.net/43j5sgzx/

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 .