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

Тема в разделе "JavaScript", создана пользователем Remca, 3 май 2016.

Статус темы:
Закрыта.
  1. Remca

    Remca

    Регистрация:
    3 май 2016
    Сообщения:
    0
    Симпатии:
    0
    Помогите мне пожалуйста, я ещё изучаю. Производятся вычисления по нескольким полям, есть формула(в самом скрипте) и как ясно из формулы, в вычислениях, есть промежуточное вычисление значения 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>
     
    Lasted edited by : 3 май 2016
  2. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.044
    Симпатии:
    777
    Код:
    document.forma1.res.addEventListener("focus", areaRectangle);
    Пользуйтесь тегами кода! Код в виде обычного текста почти не читабелен.
     
  3. Remca

    Remca

    Регистрация:
    3 май 2016
    Сообщения:
    0
    Симпатии:
    0
    Спасибо, всё считается правильно, но теперь с поля t2, результат заносится в res, и дает дальше считать
    Но ведь, до нажатия кнопки "Вычислить", поле res, должно быть пустым
     
  4. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.044
    Симпатии:
    777
    Тогда нужно вообще логику менять этого скрипта.
    Мой код просто заменяет клик по кнопке на событие фокуса в поле res. Если же нужно выдирать какие-то промежуточные данные из функции
    areaRectangle, нужно её разбить на несколько частей, записывать результат их роботы в глобальные переменные, а затем их значения выводить.
     
  5. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    Как-то так:
    Код:
    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:
     
  6. Remca

    Remca

    Регистрация:
    3 май 2016
    Сообщения:
    0
    Симпатии:
    0
    Dotrox,
    Спасибо,теперь правильно работает
     
Статус темы:
Закрыта.