Вход

Просмотр полной версии : Отслеживание события при добавлении значения в поле скриптом

dmitry.sh18
14.10.2019, 15:48
Добрый день. Есть 3 input поля. В первое поле вручную вводятся данные и при событии onchange запускается скрипт, который по формуле обрабатывает данные из первого поля и помещает результат во второе поле.

Есть также третье поле в которое нужно подставить результаты из второго поля и обработать с помощью формулы. Но проблема в том, что событие onchange на втором поле не срабатывает, если значение добавляется с помощью скрипта (если вводить значение вручную, то скрипт отрабатывает). Как можно это исправить?
рони
14.10.2019, 16:15
dmitry.sh18,
зачем отслеживать ввод во второе поле, если у вас уже есть привязка к первому, скрипт который вывел данные во второе поле, может вывести и в третье?
dmitry.sh18
14.10.2019, 16:52
не совсем, например, пользователь вводит в поле 1 значение 5, во второе поле должно подставиться значение "поле 1 * 10", т.е. во второе поле мы должны получить число 50, а в третье поле мы должны получить "поле 2 * 10", т.е. 500. Но когда скрипт вводит в поле 2 результаты расчетов, поле 3 его не видит.
laimas
14.10.2019, 17:19
не совсем

<input id="a1" />
<input id="a2" readonly="" />
<input id="a3" readonly="" />

<script>
document.getElementById('a1').addEventListener('in put', function() {
this.value = this.value.replace(/\D/,'');
document.getElementById('a2').value = this.value * 10;
document.getElementById('a3').value = this.value * 100;
});
</script>

И что тут не совсем?
рони
14.10.2019, 17:21
пользователь вводит в поле 1 значение 5,
вы что-то не договариваите ...
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>

</head>

<body>
<input type="text">
<input type="text">
<input type="text">
<script>
var inp = document.querySelectorAll('input');
inp[0].addEventListener('input', function() {
inp[1].value = this.value * 10;
inp[2].value = this.value * 10 * 10;

}, false)
</script>

</body>
</html>
dmitry.sh18
14.10.2019, 17:36
<input id="a1" />
<input id="a2" readonly="" />
<input id="a3" readonly="" />

<script>
document.getElementById('a1').addEventListener('in put', function() {
this.value = this.value.replace(/\D/,'');
document.getElementById('a2').value = this.value * 10;
document.getElementById('a3').value = this.value * 100;
});
</script>

И что тут не совсем?

Спасибо, то что нужно!
dmitry.sh18
14.10.2019, 17:36
вы что-то не договариваите ...
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>

</head>

<body>
<input type="text">
<input type="text">
<input type="text">
<script>
var inp = document.querySelectorAll('input');
inp[0].addEventListener('input', function() {
inp[1].value = this.value * 10;
inp[2].value = this.value * 10 * 10;

}, false)
</script>

</body>
</html>

Спасибо за ответ, именно это и было нужно!