Форум

Tedrik · #1 (**permalink**) 05.04.2014, 12:09

Не могу сообразить, как сделать, чтобы в каждом form работало изменение текста в реальном времени, а не после потери фокуса.

<form name="9mmammo">
<input type="text" id="count" value="1" onchange="calc1()"><div>Сумма: <span id="result1">5</span> руб.</div>
</form>

<form name="556ammo">
<input type="text" id="count" value="1" onchange="calc2()"><div>Сумма: <span id="result2">10</span> руб.</div>
</form>

<script type="text/javascript">
var input = document.body.children[0];

input.oninput = 
	function calc1()
	{
	var amount = document.forms["9mmammo"].count.value;
	document.getElementById('result1').innerHTML = amount * 5;
	}
	;
	function calc2()
	{
	var amount = document.forms["556ammo"].count.value;
	document.getElementById('result2').innerHTML = amount * 10;
	}
	
</script>

В данном случае лишь первый input работает, а второй только после потери фокуса. Прошу помочь разбирающимся.

рони · #2 (**permalink**) 05.04.2014, 12:48

Tedrik,

id неповторимо

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form name="9mmammo">
<input type="text" id="count1" value="1"  oninput="calc1(+this.value||0)"><div>Сумма: <span id="result1">5</span> руб.</div>
</form>

<form name="556ammo">
<input type="text" id="count2" value="1" oninput="calc2(+this.value||0)"><div>Сумма: <span id="result2">10</span> руб.</div>
</form>

<script type="text/javascript">

	function calc1(amount)
	{
	document.getElementById('result1').innerHTML = amount * 5;
	}
	;
	function calc2(amount)
	{
	document.getElementById('result2').innerHTML = amount * 10;
	}

</script>

</body>

</html>

Tedrik · #3 (**permalink**) 05.04.2014, 13:05

Сообщение от рони

Tedrik,

id неповторимо

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form name="9mmammo">
<input type="text" id="count1" value="1"  oninput="calc1(+this.value||0)"><div>Сумма: <span id="result1">5</span> руб.</div>
</form>

<form name="556ammo">
<input type="text" id="count2" value="1" oninput="calc2(+this.value||0)"><div>Сумма: <span id="result2">10</span> руб.</div>
</form>

<script type="text/javascript">

	function calc1(amount)
	{
	document.getElementById('result1').innerHTML = amount * 5;
	}
	;
	function calc2(amount)
	{
	document.getElementById('result2').innerHTML = amount * 10;
	}

</script>

</body>

</html>

Огромное спасибо, Вам плюсик!

Vlasenko Fedor · #4 (**permalink**) 05.04.2014, 13:42

<form name="9mmammo">
  <input type="text" class="calc" value="1" data-operator="*" data-val="5">
  <div>Сумма:
    <span class="result">5</span>руб.</div>
</form>
<form name="556ammo">
  <input type="text" class="calc" data-operator="*" data-val="10" value="1">
  <div>Сумма:
    <span class="result">10</span>руб.</div>
</form>
<form>
  <input type="text" class="calc" data-operator="+" data-val="3" value="1">
  <div>Сумма:
    <span class="result">10</span>руб.</div>
</form>
<script type="text/javascript">
  var inputs = document.querySelectorAll("input.calc");
  var len = inputs.length;
  while (len--) inputs[len].onkeyup = showResult;
  function showResult() {
    var val = this.value = this.value.replace(/\D/g, '');
    if(!val) return;
    var operator = this.getAttribute("data-operator");
    var opval = this.getAttribute("data-val");
    var par = this.parentNode || this.parentElement;
    var rez = par.querySelector("span.result");
    rez.innerHTML = Function('return ' + val + operator + opval)();
  };
</script>

миникалькулятор

рони · #5 (**permalink**) 05.04.2014, 13:57

Poznakomlus,

Цитата:

\D Найдет нецифровой символ

Vlasenko Fedor · #6 (**permalink**) 05.04.2014, 14:04

рони,
не понял, ну да найдет и удалит. Объясни, что имел ввиду
добавил if(!val) return;
this.value.replace(/\D/g, '');
а вот плюсануть не могу. Спасибо что поправил

Tedrik · #7 (**permalink**) 05.04.2014, 15:47

Сообщение от Poznakomlus

<form name="9mmammo">
  <input type="text" class="calc" value="1" data-operator="*" data-val="5">
  <div>Сумма:
    <span class="result">5</span>руб.</div>
</form>
<form name="556ammo">
  <input type="text" class="calc" data-operator="*" data-val="10" value="1">
  <div>Сумма:
    <span class="result">10</span>руб.</div>
</form>
<form>
  <input type="text" class="calc" data-operator="+" data-val="3" value="1">
  <div>Сумма:
    <span class="result">10</span>руб.</div>
</form>
<script type="text/javascript">
  var inputs = document.querySelectorAll("input.calc");
  var len = inputs.length;
  while (len--) inputs[len].onkeyup = showResult;
  function showResult() {
    var val = this.value = this.value.replace(/\D/g, '');
    if(!val) return;
    var operator = this.getAttribute("data-operator");
    var opval = this.getAttribute("data-val");
    var par = this.parentNode || this.parentElement;
    var rez = par.querySelector("span.result");
    rez.innerHTML = Function('return ' + val + operator + opval)();
  };
</script>

миникалькулятор

Спасибо, это как раз, то что нужно. Мне нельзя было менять id input'ов, а тут как раз, то что требовалось!

abduRahman · #8 (**permalink**) 16.04.2014, 23:07

Я решил добавить условие
function calc1(amount)
if (amount <=10)
{
document.getElementById('result1').innerHTML = amount * 140;
}
else {
document.getElementById('result1').innerHTML = amount * 130;
}

Но резльтат не выводит. Почему не подскажите??

рони · #9 (**permalink**) 16.04.2014, 23:23

abduRahman,
а где у функции скобки? {}

abduRahman · #10 (**permalink**) 16.04.2014, 23:45

Форум

Справочник

Discord чат

Курсы javascript