Dynamic calculation

Asked

Viewed 195 times

0

I have 6 inputs and when I type a percentage value I need to recalculate the value of the following ones, but if I change some value from another field it needs to recalculate the remaining ones so that the sum of the inputs gives 100%;

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html>
	<head>
		<title>Porcentagem</title>
		<meta charset="UTF-8"/>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<h2 align="center">Porcentagem</h2>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo1" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo2" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo3" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo4" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo5" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-4">
					<input type="text" id="campo6" class="form-control">
				</div>
				<div class="col-md-4">
				</div>
			</div>
			<br/>
		</div>
		<script type="text/javascript">

		</script>
	</body>
</html>

Cálculo dinâmico de porcentaem

javascript jquery

1 answer

4


What you need:

Knowing the elements you work with:

var inputs = Array.from(document.querySelectorAll('input'));
var destino = document.querySelector('#destino');

Store a reference of already modified widgets:

const editados = [];

Have a function to do these accounts and write the result:

function recalcular() {
  editados.push(this);
  const restante = 100 - editados.reduce(
    (sum, el) => sum + Number(el.value || 0), 0
  );
  const total = inputs.forEach(el => {
    if (editados.includes(el)) return;
    else el.value = restante / (inputs.length - editados.length);
  });
}

Trigger this function recalcular when one of the inputs receives new values:

for (let i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('change', recalcular);
}

Example:

const inputs = Array.from(document.querySelectorAll('input'));
const destino = document.querySelector('#destino');
const editados = [];

function recalcular() {
  editados.push(this);
  const restante = 100 - editados.reduce(
    (sum, el) => sum + Number(el.value || 0), 0
  );
  const total = inputs.forEach(el => {
    if (editados.includes(el)) return;
    else el.value = restante / (inputs.length - editados.length);
  });
}

for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', recalcular);
}
<div class="container">
  <div class="row">
    <h2 align="center">Porcentagem</h2>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo1" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo2" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo3" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo4" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo5" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
      <input type="text" id="campo6" class="form-control">
    </div>
    <div class="col-md-4">
    </div>
  </div>
  <br/>
</div>
<div id="destino"></div>

Browser other questions tagged javascript jquery

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