Dynamic calculation

Navigation
0

I have 6 inputs and when I type a percentage value I need to recalculate the value of the following, 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%; > 

<!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><!--LatestcompiledandminifiedJavaScript--><scriptsrc="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>

    
asked by anonymous 11.08.2017 / 14:00

1 answer

4

What you need:

Know the elements you work with: 

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

Save a reference to the elements already modified: 

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);
  });
}

Activate 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>
    
11.08.2017 / 14:12
Validate TextBox content Find out if it is even or odd in array