Numerous if and Else conditions

Asked

Viewed 174 times

3

I have 5 fields input where I should put any number, and two buttons: one with the biggest name and the other with the smallest name.

When you click on the larger button, I need it to tell me which field is the largest number typed, and when you click on the "smaller" button, it tells me which is the smallest number typed. It also has to give information that some field is empty if the user does not put anything there.

I made HTML and Javascript, but I’m not able to finish:

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

2 answers

5

Find 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.

Moreover, the comparison I was making was not valid:

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

Each comparison has to have two operands, and therefore 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 most direct one will then be using Math.max, Math.min and an array to store inputs and their values. To create an array with the values of each input you can do it manually by inserting one by one with push. To make code shorter and less repetitive I demonstrate 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 instructions that calculate the maximum:

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

Here we start by transforming the NodeList coming out of querySelectorAll in a normal array with:

[...inputs]

The goal is to be able to use the function map which cannot be used on a NodeList directly. The ... correspond to the Spread Operator that expands the elements all on the site.

Then we map each <input> with map:

.map(n =>

Mapping is done for the number conversion of the value written in the field:

parseInt(n.value)

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

Math.max(...nums)

This works because this function can receive as many numbers as needed, which will always return the largest. At the very least the process was equal, but changing max for min.

As a final remark, note that this solution both works to find the maximum of 5 inputs, such as from 500, ensuring that you select them appropriately on the first line of code. If you use a class instead of ids then works directly without having to change a single line of code.

  • 1

    Legal Isac. Thank you for taking the time to help me.

  • @E.MC. No problem, that’s what we’re here for

0

Same result with a 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>

Browser other questions tagged javascript html

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