Как реализовать демо-вычисления

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

  1. Remca

    Remca

    Регистрация:
    3 май 2016
    Сообщения:
    0
    Симпатии:
    0
    Я написал скрипт и форму, по которой производятся и считаются вычисления при нажатии на кнопку "Вычислить". Помогите пожалуйста, как можно реализовать демо-вычисления: при нажатии на кнопку "Демо", значения по умолчанию вставляются в соответствующие им поля, но до нажатия на на кнопку "Демо", поля должны быть пустыми.


    Код:
    function proverka(input) {
        var value = input.value;
        var rep = /[-;":'a-zA-Zа-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;
        if (rep.test(value)) {
            value = value.replace(rep, '');
            input.value = value;
        }
    } 
    Код:
    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() { //в подрасчёте есть промежуточное значение l1
        console.log(1); //пользователь узнает чему равно l1, только после ввода H1 и H2, и нажатия на
        var H1=+document.forma1.t1.value||0; //текстовое поле t3
      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);
    });
    
    HTML:
    <form name="forma1" style="background-color:#44944A;"> <!-- поменяю цвет формы -->
    <div id="resizable">
    <!--"подрасчёт 1.1"-->
    <table align="center">
    <br>
    <p align="center">Глубина установки конца заливочных труб</p>
    <tr><td height="40px">
    <div class="price" title="H1">Расстояние от устья скважины до нижних отверстий фильтра, м;</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" title="H2">Расстояние от устья скважины до верхних отверстий фильтра, м;</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>
    <br>
    </form>
    Функция calc1 нужна для вычисления промежуточного значения l1

    Под формулой есть значения по умолчанию для демо-вычислений
    [​IMG]
     
  2. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    Код:
    document.getElementById("demo").addEventListener("click", function(e) {
        document.forma1.t1.value = 4566;
        ....
    });
    и по аналогии дальше
     
  3. Remca

    Remca

    Регистрация:
    3 май 2016
    Сообщения:
    0
    Симпатии:
    0
    А в форме ничего не меняется?
    --- Добавлено, 16 май 2016 ---
    Спасибо, ваш вариант у меня не заработал, поэтому я использовал другой.

    Код:
    function areaRectangle() {
    ...
    /* демо вычисления */
    $(function(){
      $("#demo").click(function(){
      var H1 = $(".h1").attr("data");
      var H2 = $(".h2").attr("data");
      var L1 = H2-H1;
      var Pup = $("#pup").attr("data");
      var Pzh = $("#pzh").attr("data");
      var L = H2-L1*(Pup/Pzh);
     
      $(".h1").val(H1);
      $(".h2").val(H2);
      $(".l1").val(L1);
      $("#pup").val(Pup);
      $("#pzh").val(Pzh);
      $("#l").val(L); 
       
      });
      });
    И в форму добавил пару атрибутов data и классов