Conditional with if and Else

Asked

Viewed 86 times

1

I have two buttons, one is Greater and the other is Minor to return the following:

I have two fields where I type a value in each. The first (larger) button has to return me which of the two numbers is the largest and the second button has to return me which of the two numbers is the smallest, but I’m not able to nest the if and Else conditions.

Follow the code below:

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>

javascript html
  • 1

    If each button makes a calculation it would not be easier to separate into two functions?

  • What do you think Caique? and how do I do it?

3 answers

1

As @Caiqueromero said, you’d better separate the functions, otherwise you’ll need to identify which button was clicked before you know which logic should be executed.

It’s gonna be something like this:

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");
        }
    }
}

In HTML, you call a function on each button:

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

1

I’ve split your function into two: Menor() and Maior() so each button will call its proper function.

Within each method I check if the field has been filled in, if both are filled in I compare the values.

Obs.: How do you use the parseint() to verify the completion of the fields, if the value is zero it will not be considered as filled, understand why:

parseint:

If base is Undefined or 0 (or absent), Javascript assumes the following:

If the input string starts with "0x" or "0X", the base is 16 (hexadecimal) and the rest of the string is parsed. If the string input starts with "0", base is eight (octal) or 10 (decimal). Exactly which basis is chosen is dependent on the implementation. The Ecmascript 5 specifies that 10 (decimal) is used, but not all browsers still support this. For this reason always specify a base when using parseint. If the input string starts with any other value, the base is 10 (decimal). If the first character cannot be converted to a number, parseint returns Nan.

Example below:

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>

  • Caique, perfect brother!! Gave very right. Thank you very much!!

0

I would suggest:

<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/

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.