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

<script> <!-- запрещаем пользователю вводить буквы -->
function proverka(input) { 
    var value = input.value; 
    var rep = /[-;":'a-zA-Zа-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;  
    if (rep.test(value)) { 
        value = value.replace(rep, ''); 
        input.value = value; 
    } 
} 
</script> 
 
<!-- задаю для всех div-ов класс price -->
<style>
.price {
display:inline-block;
width:400px;
color:blue;
}
</style>
 
 
<script> <!-- вычисление подрасчёта 1.1 -->
function areaRectangle() {
    this.calc1();
  var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
 
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);
});
 
</script>