Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Расчет значения на лету (https://javascript.ru/forum/misc/70423-raschet-znacheniya-na-letu.html)

avsavs 04.09.2017 12:31

Расчет значения на лету
 
Добрый день!

Необходимо на лету сделать расчет по введенным значениям в input-ы по заданной формуле

<input type="text" id="a" value="60" />
<input type="text" id="b" value="0" />
<input type="text" id="c" value="0" />

Формула - ((a-b-c)/(a-b))*100

Вывод в id="d" <input type="text" id="d" value="0" />

пробовал вариант из примеров сети, но не выходит ... Прошу помощи
Спасибо

avsavs 04.09.2017 12:48

Ну вот делаю так

<script type="text/javascript">
function raschitat() {
a = document.getElementById('a').value;
b = document.getElementById('b').value;
c = document.getElementById('c').value;

d = ((parseFloat (a) - parseFloat (b)  - parseFloat (c) )/(parseFloat (a) - parseFloat (b)))*100;

document.getElementById('d').innerHTML = d ;
}
</script>



<button onClick="raschitat()">Рассчитать</button><div id="d"></div>


а мне надо, чтобы без кнопки, сразу в div выводило...

и в input у меня еще проверка на число стоит...
<input type="text" id="a" value="60" onkeyup="return proverka(this);" onchange="return proverka(this);" />
<input type="text" id="b" value="0" onkeyup="return proverka(this);" onchange="return proverka(this);" />
<input type="text" id="c" value="0" onkeyup="return proverka(this);" onchange="return proverka(this);" />
<button onClick="raschitat();">Рассчитать</button>
<div id="d"></div>

Nexus 04.09.2017 13:03

avsavs, не тестировал.
['a','b','c'].forEach(function(id){
	document.getElementById(id).addEventListener('keyup',function(){
		if(proverka(this))
			raschitat();
	},false);
});

void() 04.09.2017 13:18

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<input type="text" id="a" class='input' value="60" />
	<input type="text" id="b" class='input' value="0" />
	<input type="text" id="c" class='input' value="0" />
	<input type="text" id="d" value="0" />

	<script>
		window.onload = function(){
			var inp = document.querySelectorAll('.input');
			for(var i = 0; i < inp.length; i++){
				inp[i].oninput = calc;
			}		

			function calc(){
				a = document.getElementById('a').value;
				b = document.getElementById('b').value;
				c = document.getElementById('c').value;
				d = (a-b-c)/(a-b)* 100;
				document.getElementById('d').value = d ;
			}
		}
	</script>

</body>
</html>

avsavs 04.09.2017 13:40

Спасибо, помогло решение


Часовой пояс GMT +3, время: 09:47.