[Решено] Вывод результата в текстовом поле без кнопки

Remca · 3 май 2016

Помогите мне пожалуйста, я ещё изучаю. Производятся вычисления по нескольким полям, есть формула(в самом скрипте) и как ясно из формулы, в вычислениях, есть промежуточное вычисление значения l1, но пользователь узнает его результат, только после нажатия кнопки "Вычислить". Как реализовать вывод результата в текстовом поле без кнопки, т.е. когда пользователь ввёл H1 и H2 (это 2исходных данных для вычисления l1), а при нажатии на текстовое поля значения l1, сразу бы вышел результат l1.

Код:

<script>
function areaRectangle(){
  var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;

if ( (H1 == 0) || (H2 == 0) || (p1 == 0) || (p2 == 0) ) {
        alert('Входные данные не могут быть равны 0');
      return;
    }
    if ( (H1 < 0) || (H2 < 0) || (p1 < 0) || (p2 < 0) ) {
        alert('Входные данные не могут быть меньше 0');
      return;
    }   
    if ( H2 < H1 ) {
        alert('H2 должно быть больше H1');
      return;
    }
   
  var p1=document.forma1.t4.value;
  var p2=document.forma1.t5.value;
  var L=H2-l1*(p1/p2||0);
  document.forma1.res.value=L;
}
</script>  


<form name="forma1" style="background-color:#44944A;"> <!-- поменяю цвет формы -->
<div id="resizable">
<!--"подрасчёт 1.1"-->
<table align="center">
<p align="center">Глубина установки конца заливочных труб</p>
<tr><td height="40px">
<div class="price">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input name="t1" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input name="t2" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price">Интервал отверстий фильтра, м;</div><input name="t3" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input name="t4" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div class="price">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input name="t5" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type="button" name="button" value="Вычислить" onClick="areaRectangle();">
<input type="text" name="res" size="10">
</td></tr>
</table>
</div>
</form>

Dotrox · 3 май 2016

Код:
document.forma1.res.addEventListener("focus", areaRectangle);
Пользуйтесь тегами кода! Код в виде обычного текста почти не читабелен.

Remca · 3 май 2016

Dotrox сказал(а): ↑
Код:
document.forma1.res.addEventListener("focus", areaRectangle);
Пользуйтесь тегами кода! Код в виде обычного текста почти не читабелен.
Нажмите, чтобы раскрыть...
Спасибо, всё считается правильно, но теперь с поля t2, результат заносится в res, и дает дальше считать
Но ведь, до нажатия кнопки "Вычислить", поле res, должно быть пустым

Dotrox · 3 май 2016

Тогда нужно вообще логику менять этого скрипта.
Мой код просто заменяет клик по кнопке на событие фокуса в поле res. Если же нужно выдирать какие-то промежуточные данные из функции
areaRectangle, нужно её разбить на несколько частей, записывать результат их роботы в глобальные переменные, а затем их значения выводить.

$iD · 3 май 2016

Как-то так:

Код:

function areaRectangle() {
    this.calc1();
  var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;

if ( (H1 == 0) || (H2 == 0) || (p1 == 0) || (p2 == 0) ) {
        alert('Входные данные не могут быть равны 0');
      return;
    }
    if ( (H1 < 0) || (H2 < 0) || (p1 < 0) || (p2 < 0) ) {
        alert('Входные данные не могут быть меньше 0');
      return;
    }   
    if ( H2 < H1 ) {
        alert('H2 должно быть больше H1');
      return;
    }
   
  var p1=document.forma1.t4.value;
  var p2=document.forma1.t5.value;
  var L=H2-l1*(p1/p2||0);
  document.forma1.res.value=L;
}

function calc1() {
    console.log(1);
    var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;
}

document.addEventListener("DOMContentLoaded", function(event) {
  document.forma1.t1.addEventListener("keyup", calc1);
  document.forma1.t2.addEventListener("keyup", calc1);
});

можно сделать лучше :Smile:

Remca · 4 май 2016

Dotrox,

$iD сказал(а): ↑

Как-то так:

Код:

function areaRectangle() {
    this.calc1();
  var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;

if ( (H1 == 0) || (H2 == 0) || (p1 == 0) || (p2 == 0) ) {
        alert('Входные данные не могут быть равны 0');
      return;
    }
    if ( (H1 < 0) || (H2 < 0) || (p1 < 0) || (p2 < 0) ) {
        alert('Входные данные не могут быть меньше 0');
      return;
    }  
    if ( H2 < H1 ) {
        alert('H2 должно быть больше H1');
      return;
    }
  
  var p1=document.forma1.t4.value;
  var p2=document.forma1.t5.value;
  var L=H2-l1*(p1/p2||0);
  document.forma1.res.value=L;
}

function calc1() {
    console.log(1);
    var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;
}

document.addEventListener("DOMContentLoaded", function(event) {
  document.forma1.t1.addEventListener("keyup", calc1);
  document.forma1.t2.addEventListener("keyup", calc1);
});

можно сделать лучше :Smile:

Нажмите, чтобы раскрыть...

Спасибо,теперь правильно работает

Войти или зарегистрироваться

[Решено] Вывод результата в текстовом поле без кнопки

Remca

Dotrox Команда форума

Remca

Dotrox Команда форума

$iD Команда форума

Remca