3

Tenho 5 campos input onde devo colocar um número qualquer, e dois botões: um com o nome maior e o outro com o nome menor.

Ao clicar no botão maior, preciso que ele me diga qual o campo onde se encontra o maior número digitado, e quando clicar no botão "menor", ele me diga qual o menor número digitado. Ele também tem que dar a informação de que algum campo esteja vazio caso o usuário não coloque nada lá.

Eu fiz o HTML e JavaScript, mas nao estou conseguindo finalizar:

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>

2 Respostas 2

5

Achar o maior ou menor com base em ifs e elses acaba por ser muito extenso e repetitivo, e não é uma solução escalável para uma quantidade considerável de números.

Para além disso a comparação que estava a fazer não era válida:

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

Cada comparação tem de ter dois operandos, e por isso este mesmo if teria que ser:

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

No entanto a única solução comportável é com arrays. O mais direto será então utilizar Math.max, Math.min e um array para guardar os inputs e respetivos valores. Para criar um array com os valores de cada input pode faze-lo manualmente inserindo um a um com push. Para tornar o código mais curto e menos repetitivo demonstro o mesmo utilizando map.

Implementação:

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

Analisando em detalhe as duas instruções que calculam o máximo:

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

Aqui começamos por transformar o NodeList que sai do querySelectorAll num array normal com:

[...inputs]

O objetivo é conseguir utilizar a função map que não é possível de utilizar sobre um NodeList diretamente. Os ... correspondem ao Spread operator que expande os elementos todos no próprio local.

Depois mapeamos cada <input> com map:

.map(n =>

O mapeamento é feito para a conversão em numero do valor que está escrito no campo:

parseInt(n.value)

Depois o máximo é calculado expandindo os elementos para a função Math.max:

Math.max(...nums)

Isto funciona pois esta função pode receber tantos números quantos necessários, que irá sempre devolver o maior. Para o mínimo o processo foi igual, mas trocando max por min.

Como observação final, repare que esta solução tanto funciona para achar o máximo de 5 inputs, como de 500, garantindo que os seleciona apropriadamente na primeira linha de código. Se utilizar uma classe ao invés de ids individuais, então funciona direto sem precisar de alterar uma unica linha de código que seja.

2
  • 1
    Legal Isac. Obrigado por dispender do seu tempo para me ajudar.
    – E.M C.
    Commented 10/04/2018 às 1:06
  • @E.MC. Sem problema, estamos cá para isso mesmo
    – Isac
    Commented 10/04/2018 às 1:08
0

Mesmo resultado com uma função genérica.

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>

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 .