Countless if and else conditions

Question

Countless if and else conditions

Navigation

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

1

I have 5 inputs where I should put any number and two buttons, one with the largest name and the other with the smaller name. I need to click on the larger button to tell me the field where the largest number is entered and when I click on the "minor" button it will tell me the lowest number entered. It also has to give the information that some field is empty if the user does not put anything on it.

I did the html and JavaScript, but I was not able to finish it. S

HTML code:

<!DOCTYPE html>
<html lang="pt">

<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 com 5 Opções</title>
    <script src="js/calcMaiorMenor.js"></script>
    <link rel="stylesheet" href="css/estilo.css">
</head>

<body>
    <div class="calc-menor-maior">
        <h1>Calculadora com 5 Opções</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>
            <label for="">Número 3:</label>
            <input id="num3" type="number" placeholder="Número 3">
        </div>
        <div>
            <label for="">Número 4:</label>
            <input id="num4" type="number" placeholder="Número 4">
        </div>
        <div>
            <label for="">Número 5:</label>
            <input id="num5" type="number" placeholder="Número 5">
        </div>
        <div>
            <button onclick="Maior()">Maior</button>
            <button onclick="Menor()">Menor</button>
        </div>
    </div>
</body>

</html>

JavaScript code:

function Maior() {
    var numero1 = parseInt(document.getElementById("num1").value);
    var numero2 = parseInt(document.getElementById("num2").value);
    var numero3 = parseInt(document.getElementById("num3").value);
    var numero4 = parseInt(document.getElementById("num4").value);
    var numero5 = parseInt(document.getElementById("num5").value);

    //Verifico se os campos foram preenchidos
    if (!numero1 || !numero2 || !numero3 || !numero4 || !numero5) {
        alert("Preencha todos os campos.");

    } else {
        //Se foram preenchidos verifico qual é o menor
        if (numero1 < numero2 < numero3 < numero4 < numero5)
            alert("O número 1 possui o menor valor.");
        else if (numero2 < numero1 < numero3 < numero4 < numero5)
            alert("O número 2 possui o menor valor.");
        else if (numero3 < numero1 < numero2 < numero4 < numero5)
            alert("O número 3 possui o menor valor.");  
        else if (numero4 < numero1 < numero2 < numero3 < numero5)
            alert("O número 4 possui o menor valor.");
        else if (numero5 < numero1 < numero2 < numero3 < numero4)
            alert("O número 5 possui o menor valor.");          
        else if (numero1 == numero2)
            alert("Os valores dos número 1 e 2 são iguais.");
        else if (numero1 == numero3)
            alert("Os valores dos número 1 e 3 são iguais.");
        else if (numero1 == numero4)
            alert("Os valores dos número 1 e 4 são iguais.");
        else if (numero1 == numero5)
            alert("Os valores dos número 1 e 5 são iguais.");
        else if (numero2 == numero3)
            alert("Os valores dos número 2 e 3 são iguais.");
        else if (numero2 == numero4)
            alert("Os valores dos número 2 e 4 são iguais.");
        else if (numero2 == numero2)
            alert("Os valores dos número 2 e 5 são iguais.");
        else if (numero3 == numero4)
            alert("Os valores dos número 3 e 4 são iguais.");
        else if (numero3 == numero5)
            alert("Os valores dos número 3 e 5 são iguais.");
        else if (numero4 == numero5)
            alert("Os valores dos número 4 e 5 são iguais.");
        else
            alert("O número 2 possui o menor valor.");
    }
}

javascript html

asked by anonymous 10.04.2018 / 02:20

2 answers

How to run a subquery in LINQ C #? Run the shell_exec command with UTF-8 in PHP

score 2 · Answer 1

Finding the largest or smallest based on ifs and elses turns out to be very extensive and repetitive, and is not a scalable solution for a considerable amount of numbers.

In addition, the comparison I was making was not valid:

if (numero1 < numero2 < numero3 < numero4 < numero5)

Each comparison must have two operands, so this same if would have to be:

if (numero1 < numero2 && numero1 < numero3 && numero1 < numero4 && numero1 < numero5)

However the only behavioral solution is with arrays. The more straightforward will be to use Math.max , Math.min and an array to store the inputs and their values. To create an array with the values of each input you can do this manually by inserting one by one with push . To make the code shorter and less repetitive, show the same using map .

Implementation:

//obter os inputs todos e guardar num "array" (NodeList)
const inputs = document.querySelectorAll("#num1, #num2, #num3, #num4, #num5");

//função para validar se todos os inputs estão preenchidos
function inputsValidos(){
   for (let input of inputs){
     if(input.value == "" || isNaN(input.value)){
        return false;
     }
   }
   return true;
}

function Maior(){
   if (inputsValidos(inputs)){
     //mapear todos os inputs para um array de numeros utilizando map e parseInt
     const nums = [...inputs].map(n => parseInt(n.value));
     //obter o maximo com Math.max e passando a expansão do array
     console.log(Math.max(...nums)); 
   }
   else {
     console.log("Preencha todos os campos.");
   }
}

function Menor(){
   if (inputsValidos(inputs)){
     const nums = [...inputs].map(n => parseInt(n.value));
     console.log(Math.min(...nums)); //neste caso igual mas usando o min em vez de max
   }
   else {
     console.log("Preencha todos os campos.");
   }
}

<!DOCTYPE html>
<html lang="pt">

<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 com 5 Opções</title>
    <script src="js/calcMaiorMenor.js"></script>
    <link rel="stylesheet" href="css/estilo.css">
</head>

<body>
    <div class="calc-menor-maior">
        <h1>Calculadora com 5 Opções</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>
            <label for="">Número 3:</label>
            <input id="num3" type="number" placeholder="Número 3">
        </div>
        <div>
            <label for="">Número 4:</label>
            <input id="num4" type="number" placeholder="Número 4">
        </div>
        <div>
            <label for="">Número 5:</label>
            <input id="num5" type="number" placeholder="Número 5">
        </div>
        <div>
            <button onclick="Maior()">Maior</button>
            <button onclick="Menor()">Menor</button>
        </div>
    </div>
</body>

</html>

Analyzing in detail the two statements that calculate the maximum:

const nums = [...inputs].map(n => parseInt(n.value));
console.log(Math.min(...nums));

Here we start by transforming NodeList from querySelectorAll into a normal array with:

[...inputs]

The goal is to be able to use the map function that can not be used on a NodeList directly. The ... corresponds to the Spread operator that expands the elements all in one place.

Then we map each <input> with map :

.map(n =>

The mapping is done for the conversion into number of the value that is written in the field:

parseInt(n.value)

Then the maximum is calculated by expanding the elements to the Math.max function:

Math.max(...nums)

This works because this function can receive as many numbers as needed, which will always return the largest. For the minimum the process was the same, but changing max by min .

As a final note, note that this solution works both to find the maximum of 5 inputs, and 500 , ensuring that you select them appropriately in the first line of code. If you use a class instead of ids , then it works right without having to change a single line of code.

score 0 · Answer 2

Same result with generic function.

function fMaiorMenor(op){
	var num_1 = document.getElementById('num1'),
	num_2 = document.getElementById('num2'),
	num_3 = document.getElementById('num3'),
	num_4 = document.getElementById('num4'),
	num_5 = document.getElementById('num5'),
	numFinal = 0;
	
	if( num_1.value == undefined || num_1.value == null || num_1.value == '' ){
		alert('Preencha o campo Número 1!');num_1.focus();return false;
	}
	else if( num_2.value == undefined || num_2.value == null || num_2.value == '' ){
		alert('Preencha o campo Número 2!');num_2.focus();return false;
	}
	else if( num_3.value == undefined || num_3.value == null || num_3.value == '' ){
		alert('Preencha o campo Número 3!');num_3.focus();return false;
	}
	else if( num_4.value == undefined || num_4.value == null || num_4.value == '' ){
		alert('Preencha o campo Número 4!');num_4.focus();return false;
	}
	else if( num_5.value == undefined || num_5.value == null || num_5.value == '' ){
		alert('Preencha o campo Número 5!');num_5.focus();return false;
	}
	else{
		numFinal = num_1.value;
		if( parseInt(op) == 1 ){
			if( parseInt(num_2.value) > parseInt(numFinal) ){
				numFinal = num_2.value;
			}
			if( parseInt(num_3.value) > parseInt(numFinal) ){
				numFinal = num_3.value;
			}
			if( parseInt(num_4.value) > parseInt(numFinal) ){
				numFinal = num_4.value;
			}
			if( parseInt(num_5.value) > parseInt(numFinal) ){
				numFinal = num_5.value;
			}
			alert('O Maior número é : '+numFinal.toString() );
		}
		else if( parseInt(op) == 2 ){
			if( parseInt(num_2.value) < parseInt(numFinal) ){
				numFinal = num_2.value;
			}
			if( parseInt(num_3.value) < parseInt(numFinal) ){
				numFinal = num_3.value;
			}
			if( parseInt(num_4.value) < parseInt(numFinal) ){
				numFinal = num_4.value;
			}
			if( parseInt(num_5.value) < parseInt(numFinal) ){
				numFinal = num_5.value;
			}
			alert('O Menor número é : '+numFinal.toString() );
		}
	}
}

<div class="calc-menor-maior">
        <h1>Calculadora com 5 Opções</h1>
        <div>
            <label for="">Número 1:</label>
            <input id="num1" name="num1" type="number" placeholder="Número 1">
        </div>
        <div>
            <label for="">Número 2:</label>
            <input id="num2" name="num2" type="number" placeholder="Número 2">
        </div>
        <div>
            <label for="">Número 3:</label>
            <input id="num3" name="num3" type="number" placeholder="Número 3">
        </div>
        <div>
            <label for="">Número 4:</label>
            <input id="num4" name="num4" type="number" placeholder="Número 4">
        </div>
        <div>
            <label for="">Número 5:</label>
            <input id="num5" name="num5" type="number" placeholder="Número 5">
        </div>
        <div>
            <button onclick="fMaiorMenor(1)">Maior</button>
            <button onclick="fMaiorMenor(2)">Menor</button>
        </div>
    </div>