Conditionals with if and else

Question

Conditionals with if and else

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have two buttons, one is Major 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 am 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

asked by anonymous 09.04.2018 / 21:13

3 answers

Receive 3 random values and allocate in 3 variables from the lowest to the highest Language R - Use of function to avoid repetitions of code

score 1 · Answer 1

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

It will 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>

score 1 · Answer 2

I've separated 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, if both are filled I make the comparison of the values.

Note: How do you use parseInt () to check the field fill, 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 of   input starts with "0", the base is eight (octal) or 10 (decimal).   Exactly which base is chosen is implementation dependent. O   ECMAScript 5 specifies that 10 (decimal) is used, but not all   browsers support that yet. 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   can not 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>

score 0 · Answer 3

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: link