Нужна помощь с input
Не могу сообразить, как сделать, чтобы в каждом 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 работает, а второй только после потери фокуса. Прошу помочь разбирающимся. |
Tedrik,
:cray: 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>
|
Цитата:
|
<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>
миникалькулятор :dance: |
Poznakomlus,
Цитата:
|
рони,
не понял, ну да найдет и удалит. Объясни, что имел ввиду добавил if(!val) return; this.value.replace(/\D/g, ''); а вот плюсануть не могу. Спасибо что поправил |
Цитата:
|
Я решил добавить условие
function calc1(amount) if (amount <=10) { document.getElementById('result1').innerHTML = amount * 140; } else { document.getElementById('result1').innerHTML = amount * 130; } Но резльтат не выводит. Почему не подскажите?? |
abduRahman,
а где у функции скобки? {} |
function calc1(amount){
if (amount <=10) { document.getElementById('result1').innerHTML = amount * 140; } else { document.getElementById('result1').innerHTML = amount * 130; } }; ответ показывает долисекунды и пропадает. почему скажите пжлста |
| Часовой пояс GMT +3, время: 12:56. |