Formatar valores da caixa input em Javascript

Willian_Lenon · Agosto 13, 2020, 1:57am

Boa noite!
Fiz um programa no qual digito o salário de uma pessoa e dada determinada condição ele mostra o salario anterior antes do ajuste, o percentual aplicado, valor aumentado e o novo salário. Quando pego os dados do input, não consigo formatar utilizando o toLocaleString(), não aparece o valor.
Sem%20t%C3%ADtulo
Alguém poderia ajudar?
Segue abaixo o código:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ex15</title>

<style>

    body{

        background-color: cornflowerblue;

    }

    header{

        text-align: center;

        color: white;

        text-shadow:10px 10px 10px black;

    }

    header p{

        text-align: center;

        font-style: italic;

    }

    div#conteudo, div#res{

        background-color: white;

        margin: auto;

        width: 400px;

        margin-bottom: 15px;

        padding: 10px;

    }

    div#conteudo label{

        font-weight: bold;

                    

    }

    div#conteudo input{            

        padding: 5px;

        margin-bottom: 5px;

    }

                    

</style>

<header>

    <h1>Exercício 15</h1>

    <p>Aumento de salário</p>

    <p>Salários até R$ 280,00 (incluindo): aumento de 20%</p>

    <p>Salários entre R$ 280,00 e R$ 700,00: aumento de 15%</p>

    <p>Salários entre R$ 700,00 e R$ 1500,00: aumento de 10%</p>

    <p>Salários de R$ 1500,00 em diante: aumento de 5%</p>

    <p>Após o aumento ser calculado, deverá ser informado: o salário antes do

        reajuste; o percentual de aumento aplicado; o valor do aumento; o novo

        salário, após o aumento.</p>

</header>

<section>

    <div id="conteudo">

        <label for="salario">Informe o salário: </label>

        <p><input type="number" name="salario" id="sal" ></p>            

        <input type="button" value="Ajuste" id="botao" >

                                           

    </div>

    <div id="res">

        
        

    </div>

</section>

<script>

    //Pegando os dados

    let salario = document.querySelector("#sal").value;

    let botao = document.querySelector("#botao");

    let res = document.querySelector("#res");

    let ajuste = 0;

    let salarioFormatado = salario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})

                  

    //Funcao calcula ajuste salario

    function ajusteSalario(){

        if(salario.value >= 0 && salario.value <= 280){

            ajuste = 20;

            let valorAjuste = Number(salario.value) * (ajuste / 100);

            let novoSalario = Number(salario.value) + valorAjuste;

            res.innerHTML = `Salário antes do reajuste: R$ ${salarioFormatado} <br>`;

            res.innerHTML += `Percentual de aumento aplicado: ${ajuste}% <br>`;

            res.innerHTML += `Valor do aumento: ${valorAjuste.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})} <br>`;

            res.innerHTML += `Novo salário, após o aumento: R$ ${novoSalario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})}`;                

        }else if (salario.value > 280 && salario.value < 700){

            ajuste = 15;

            let valorAjuste = Number(salario.value) * (ajuste / 100);

            let novoSalario = Number(salario.value) + valorAjuste;

            res.innerHTML = `Salário antes do reajuste: R$ ${salario.value} <br>`;

            res.innerHTML += `Percentual de aumento aplicado: ${ajuste}% <br>`;

            res.innerHTML += `Valor do aumento: ${valorAjuste.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})} <br>`;

            res.innerHTML += `Novo salário, após o aumento: R$ ${novoSalario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})}`;

        }else if(salario.value >= 700 && salario.value < 1500){

            ajuste = 10;

            let valorAjuste = Number(salario.value) * (ajuste / 100);

            let novoSalario = Number(salario.value) + valorAjuste;

            res.innerHTML = `Salário antes do reajuste: R$ ${salario.value} <br>`;

            res.innerHTML += `Percentual de aumento aplicado: ${ajuste}% <br>`;

            res.innerHTML += `Valor do aumento: ${valorAjuste.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})} <br>`;

            res.innerHTML += `Novo salário, após o aumento: ${novoSalario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})}`;

        }else{

            ajuste = 5;

            let valorAjuste = Number(salario.value) * (ajuste / 100);

            let novoSalario = Number(salario.value) + valorAjuste;

            res.innerHTML = `Salário antes do reajuste: R$ ${salario.value} <br>`;

            res.innerHTML += `Percentual de aumento aplicado: ${ajuste}% <br>`;

            res.innerHTML += `Valor do aumento: ${valorAjuste.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})} <br>`;

            res.innerHTML += `Novo salário, após o aumento: ${novoSalario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})}`;

        }

    }

    

    botao.addEventListener('click', ajusteSalario);

    

</script>

Lucas_Camara · Agosto 13, 2020, 12:50pm

O problema eh que vc está recuperando os dados dos campos fora da função ajusteSalario. Com isso, ao clicar no botão, eles estarão com valores inválidos (pois foi executado quando a página foi carregada. Outra coisa eh que vc está pegando o valor do salário assim:

let salario = document.querySelector("#sal").value;

e está usando o valor assim: Number(salario.value), sendo que ao recuperar o value do campo, não precisaria chamar o value novamente.

Fiz a correção com alguns ajustes:

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ex15</title>
	
	<style>
		body {
			background-color: cornflowerblue;
		}
		
		header {
			text-align: center;
			color: white;
			text-shadow:10px 10px 10px black;
		}
		
		header p {
			text-align: center;
			font-style: italic;
		}

        div#conteudo, div#res {
			background-color: white;
			margin: auto;
			width: 400px;
			margin-bottom: 15px;
			padding: 10px;
		}
		
		div#conteudo label {
			font-weight: bold;
		}
		
		div#conteudo input {
			padding: 5px;
			margin-bottom: 5px;
		}
	</style>
</head>

<body>
	<header>
		<h1>Exercício 15</h1>

		<p>Aumento de salário</p>
		<p>Salários até R$ 280,00 (incluindo): aumento de 20%</p>
		<p>Salários entre R$ 280,00 e R$ 700,00: aumento de 15%</p>
		<p>Salários entre R$ 700,00 e R$ 1500,00: aumento de 10%</p>
		<p>Salários de R$ 1500,00 em diante: aumento de 5%</p>
		<p>
			Após o aumento ser calculado, deverá ser informado: o salário antes do
			reajuste; o percentual de aumento aplicado; o valor do aumento; o novo
			salário, após o aumento.
		</p>
	</header>
	
	<section>
		<div id="conteudo">
			<label for="salario">Informe o salário: </label>
			
			<p>
				<input type="number" name="salario" id="sal">
			</p>
			
			<input type="button" value="Ajuste" id="botao">
		</div>
		
		<div id="res"></div>
	</section>
	
	<script>
		//Funcao calcula ajuste salario
		function ajusteSalario() {
			//Pegando os dados
			let salario = document.querySelector("#sal").value;
			let botao = document.querySelector("#botao");
			let res = document.querySelector("#res");
			let ajuste = 0;
			let salarioFormatado = salario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'});
			
			if (salario.value >= 0 && salario.value <= 280) {
				ajuste = 20;
			} else if (salario.value > 280 && salario.value < 700) {
				ajuste = 15;
			} else if(salario.value >= 700 && salario.value < 1500) {
				ajuste = 10;
			} else {
				ajuste = 5;
			}
			
			let valorAjuste = Number(salario) * (ajuste / 100);
			let novoSalario = Number(salario) + valorAjuste;
			
			res.innerHTML = `Salário antes do reajuste: R$ ${salarioFormatado} <br>`;
			res.innerHTML += `Percentual de aumento aplicado: ${ajuste}% <br>`;
			res.innerHTML += `Valor do aumento: ${valorAjuste.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})} <br>`;
			res.innerHTML += `Novo salário, após o aumento: R$ ${novoSalario.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'})}`;
		}
		
		botao.addEventListener('click', ajusteSalario);
	</script>
</body>

</html>

Willian_Lenon · Agosto 13, 2020, 1:59pm

@Lucas_Camara obrigado por ajudar.
Rodei o código aqui, porém o valor do salário não é formatado. Segue o print:
Sem%20t%C3%ADtulo
O valor do salario não deveria aparecer o sifrão e a vírgula quando utilizando o comando toLocaleString()?
Na imagem, o valor 280 não formata, porém os demais sim.

Lucas_Camara · Agosto 13, 2020, 2:03pm

Ah sim, é preciso executar o toLocaleString sobre um number e não numa string:

Number(salario).toLocaleString('pt-br', {style: 'currency', currency: 'BRL'});

Passei batido nisso tb qdo postei minha resposta.

Willian_Lenon · Agosto 13, 2020, 5:34pm

Beleza, deu certo!
Obrigado.

Formatar valores da caixa input em Javascript

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI