How to transfer loop from qBasic to JS?

Question

I tried to move code from qBasic to JS but after moving I got incorrect result (infinite loop or incorrect numbers). Can you help me to find where is mistake. I think mistake on loop condition.

qBasic

INPUT "TA", TA
INPUT "fi", fi
INPUT "R", R
INPUT "ro", ro
INPUT "A", A
INPUT "L", L
INPUT "C", C
INPUT "TB", TB
INPUT "f", f
INPUT "DT", DT
INPUT "S", S
INPUT "TT", TT
PRINT "TIME. TMD"
PRINT "TMW"
PRINT "MASS"
C=C*ro
fi=fi/100
XA=fi*EXP(10.56-3654/(TA+230))
Bi=A*R/L
k=1/f-1
k1=SQR(2*k+6)
ka=4*(k1+2+Bi+k1*(k+5+2*k1)
ka=Bi*(k+1)*(k+5+2*k1)*(Bi+k1)/ka
m=ka*L/(C*R^2)
mass=0
time=DT/2
TS=TA+(TB-TA)*ka*f/Bi
TMW=TB
TMD=TB
DO
XS=EXP(10.56-3654/(TS+230))
AW=A*(1+.00078*(XS-XA)/(TS-TA))
DM=.78*A*(XS-XA)*DT*S
mass=mass+DM
BiW=AW*R/L
kaW=4*(k1+2+BiW)*BiW+k1*(k+5+2*k1)
kaW=BiW*(k+1)*(k+5+2*k1)*(BiW+k1)/kaW
mW=kaW*L/(C*R^2)
TMW=TMW-(TB-TA)*mW*DT*EXP(-mW*time)
TMD=TMD-(TB-TA)*m*DT*EXP(-m*time)
TS=TA+C*R*f*(TB-TA)*mW*EXP(-mW*time)/AW
PRINT time, TMD, TMW, mass
IF TM<TT THEN EXIT DO ELSE time=time+DT
LOOP
END

My JS

Sorry for long code but it need for understanding. Before I didn't faced with qBasic and I don't understand how the condition work (var TM).

document.addEventListener("DOMContentLoaded", function() {

  const submit = document.getElementById('submit')

  submit.addEventListener('click', function(e) {
    e.preventDefault();

    let ta = document.getElementById('ta').valueAsNumber;
    let fi = document.getElementById('fi').valueAsNumber;
    let r = document.getElementById('r').valueAsNumber;
    let ro = document.getElementById('ro').valueAsNumber;
    let a = document.getElementById('a').valueAsNumber;
    let l = document.getElementById('l').valueAsNumber;
    let c = document.getElementById('c').valueAsNumber;
    let tb = document.getElementById('tb').valueAsNumber;
    let f = document.getElementById('f').valueAsNumber;
    let dt = document.getElementById('dt').valueAsNumber;
    let s = document.getElementById('s').valueAsNumber;
    let tt = document.getElementById('tt').valueAsNumber;

    c = c * ro;
    fi = fi / 100;
    xa = fi * Math.exp(10.56 - 3654 / (ta + 230));
    bi = a * r / l;
    k = 1 / f - 1;
    k1 = Math.sqrt(2 * k + 6);
    ka = 4 * (k1 + 2 + bi) * bi + k1 * (k + 5 + 2 * k1);
    ka = bi * (k + 1) * (k + 5 + 2 * k1) * (bi + k1) / ka;
    m = ka * l / (c * r ^ 2);
    mass = 0;
    time = dt / 2;
    ts = ta + (tb - ta) * ka * f / bi;
    tm = tb;
    tmw = tb;
    tmd = tb;

    let table = document.getElementById('table');
    table.className += " active";

    do {
      xs = Math.exp(10.56 - 3654 / (ts + 230));
      aw = a * (1 + 0.00078 * (xs - xa) / (ts - ta));
      dm = 0.78 * a * (xs - xa) * dt * s;
      mass = mass + dm;
      biw = aw * r / l;
      kaw = 4 * (k1 + 2 + biw) * biw + k1 * (k + 5 + 2 * k1);
      kaw = biw * (k + 1) * (k + 5 + 2 * k1) * (biw + k1) / kaw;
      mw = kaw * l / (c * r ^ 2);
      tmw = tmw - (tb - ta) * mw * dt * Math.exp(-mw * time);
      tmd = tmd - (tb - ta) * m * dt * Math.exp(-m * time);
      ts = ta + c * r * f * (tb - ta) * mw * Math.exp(-mw * time) / aw;

      time = time + dt;

      let col1 = '<div class="result-col">' + Number(time).toFixed(2) + '</div>';
      let col2 = '<div class="result-col">' + Number(tmd).toFixed(2) + '</div>';
      let col3 = '<div class="result-col">' + Number(tmw).toFixed(2) + '</div>';
      let col4 = '<div class="result-col">' + Number(mass).toFixed(2) + '</div>';

      table.innerHTML += col1 + col2 + col3 + col4;

    } while (tm < tt);

  }, false);

});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 14px;
  padding: 50px 0;
}

.title {
  font-size: 36px;
  text-align: center;
  margin: 0 0 40px 0;
  padding: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.form__label {
  width: 33.3%;
  padding: 5px 20px;
  display: block;
}

.form__input {
  display: block;
  width: 100%;
  padding: 5px;
  margin: 5px 0 0 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: none;
}

.form__submit {
  display: block;
  width: 33.3%;
  margin: 30px 0;
  padding: 10px 20px;
  cursor: pointer;
}

.result {
  border: 1px solid #ccc;
  border-bottom: 0;
  display: none;
  flex-wrap: wrap;
}

.result.active {
  display: flex;
}

.result-col {
  width: 25%;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.result-col:not(:nth-child(4n)) {
  border-right: 1px solid #ccc;
}

<div class="container">
  <h1 class="title">Расчёт гидроаэрозольноиспарительного охлаждения</h1>
  <form action="#" class="form">
    <label class="form__label">Температура окружающей среды, °C
            <input id="ta" class="form__input" type="number" value="0">
            </label>

    <label class="form__label">Относительная влажность воздуха, %
                <input id="fi" class="form__input" type="number" value="100">
            </label>

    <label class="form__label">Характерный размер тела, м
                    <input id="r" class="form__input" type="number" value="0.027">
            </label>

    <label class="form__label">Плотность тела, кг/м<sup>3</sup>
                <input id="ro" class="form__input" type="number" value="1080">
            </label>

    <label class="form__label">Сухой коэффициент теплоотдачи, Вт/м<sup>2</sup>*C
                <input id="a" class="form__input" type="number" value="20">
            </label>

    <label class="form__label">Теплопроводность тела, Вт/(m*C)
                    <input id="l" class="form__input" type="number" value="0.41">
            </label>

    <label class="form__label">Теплоёмкость тела, Дж/кг*С
            <input id="c" class="form__input" type="number" value="3500">
            </label>

    <label class="form__label">Начальная температура тела, °C
                <input id="tb" class="form__input" type="number" value="35">
            </label>

    <label class="form__label">Коэффициент формы
                    <input id="f" class="form__input" type="number" value="0.37">
            </label>

    <label class="form__label">Шаг по времени, с
                <input id="dt" class="form__input" type="number" value="60">
            </label>

    <label class="form__label">Поверхность тела, м<sup>2</sup>
                <input id="s" class="form__input" type="number" value="0.09">
            </label>

    <label class="form__label">Требуемая среднеобъемная температура, °C
                    <input id="tt" class="form__input" type="number" value="4">
            </label>
    <input id="submit" class="form__submit" type="submit" value="Расчитать">
  </form>

  <div class="result" id="table">
    <div class="result-col">Время, с</div>
    <div class="result-col">Среднеобъемная температура при сухом охлаждении, °C</div>
    <div class="result-col">Среднеобъемная температура при ГАИ охлаждении, °C</div>
    <div class="result-col">Масса испарившейся воды, г</div>
  </div>
</div>

What I got in qBasic

Please add relevant HTML. Also use the submit event instead of the click event. — mplungjan, Feb 04 '22 at 14:37
One first step is to realize that `value` returns a string from an input so to use them as numbers (most notably with addition) you will need to convert them. (with inputs of `type='number'` you can use `.valueAsNumber` instead of `.value` but just be aware that empty values will return `NaN`) — pilchard, Feb 04 '22 at 14:38
You can use a unary `+` to convert. Otherwise this statement will fail for sure: `ts=ta+(tb-ta)*ka*f/bi;` because you will concatenate (tb-ta)*ka*f/bi to ta — mplungjan, Feb 04 '22 at 14:40
I edited code above as proposed @plichard but I still see incorrect result — Eugene Chefranov, Feb 04 '22 at 14:49
And I don't understand how variable `TM` works in qBasic. It's not defined — Eugene Chefranov, Feb 04 '22 at 14:52
Please add TM: `PRINT time, TMD, TMW, mass, TM` so we can see. It seems the loop only runs once so perhaps TM is supposed to be set OR it is a typo and it should me time — mplungjan, Feb 04 '22 at 16:37

mplungjan · Answer 1 · 2022-02-04T15:20:28.240

Trying to make it work

Never call anything submit in a form
Convert all input to numbers
your loop would go on forever. You need to find what TM is while (tm < tt);

window.addEventListener("DOMContentLoaded", function() {

  document.getElementById('form').addEventListener('submit', function(e) {
    e.preventDefault();
    [...document.querySelectorAll(".form__input[type=number]")].forEach(inp => window[inp.id] = +inp.value)
    c *= ro;
    fi /= 100;
    let xa = fi * Math.exp(10.56 - 3654 / (ta + 230));
    let bi = a * r / l;
    let k = 1 / f - 1;
    let k1 = Math.sqrt(2 * k + 6);
    let ka = 4 * (k1 + 2 + bi) * bi + k1 * (k + 5 + 2 * k1);
    ka = bi * (k + 1) * (k + 5 + 2 * k1) * (bi + k1) / ka;
    let m = ka * l / (c * r ^ 2);
    let mass = 0;
    let time = dt / 2;
    let ts = ta + (tb - ta) * ka * f / bi;
    console.log(tb)
    let tm = tmw = tmd = tb;

    let table = document.getElementById('table');
    table.classList.add("active");
    do {
      let xs = Math.exp(10.56 - 3654 / (ts + 230));
      let aw = a * (1 + 0.00078 * (xs - xa) / (ts - ta));
      let dm = 0.78 * a * (xs - xa) * dt * s;
      mass = mass + dm;
      let biw = aw * r / l;
      let kaw = 4 * (k1 + 2 + biw) * biw + k1 * (k + 5 + 2 * k1);
      kaw = biw * (k + 1) * (k + 5 + 2 * k1) * (biw + k1) / kaw;
      let mw = kaw * l / (c * r ^ 2);
      tmw = tmw - (tb - ta) * mw * dt * Math.exp(-mw * time);
      tmd = tmd - (tb - ta) * m * dt * Math.exp(-m * time);
      ts = ta + c * r * f * (tb - ta) * mw * Math.exp(-mw * time) / aw;

      time += dt;

      let col1 = '<div class="result-col">' + Number(time).toFixed(2) + '</div>';
      let col2 = '<div class="result-col">' + Number(tmd).toFixed(2) + '</div>';
      let col3 = '<div class="result-col">' + Number(tmw).toFixed(2) + '</div>';
      let col4 = '<div class="result-col">' + Number(mass).toFixed(2) + '</div>';

      table.innerHTML += col1 + col2 + col3 + col4;
    } while (tm < tt);
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 14px;
  padding: 50px 0;
}

.title {
  font-size: 36px;
  text-align: center;
  margin: 0 0 40px 0;
  padding: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.form__label {
  width: 33.3%;
  padding: 5px 20px;
  display: block;
}

.form__input {
  display: block;
  width: 100%;
  padding: 5px;
  margin: 5px 0 0 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: none;
}

.form__submit {
  display: block;
  width: 33.3%;
  margin: 30px 0;
  padding: 10px 20px;
  cursor: pointer;
}

.result {
  border: 1px solid #ccc;
  border-bottom: 0;
  display: none;
  flex-wrap: wrap;
}

.result.active {
  display: flex;
}

.result-col {
  width: 25%;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.result-col:not(:nth-child(4n)) {
  border-right: 1px solid #ccc;
}

<div class="container">
  <h1 class="title">Расчёт гидроаэрозольноиспарительного охлаждения</h1>
  <form action="#" class="form" id="form">
    <label class="form__label">Температура окружающей среды, °C
            <input id="ta" class="form__input" type="number" value="0">
            </label>

    <label class="form__label">Относительная влажность воздуха, %
                <input id="fi" class="form__input" type="number" value="100">
            </label>

    <label class="form__label">Характерный размер тела, м
                    <input id="r" class="form__input" type="number" value="0.027">
            </label>

    <label class="form__label">Плотность тела, кг/м<sup>3</sup>
                <input id="ro" class="form__input" type="number" value="1080">
            </label>

    <label class="form__label">Сухой коэффициент теплоотдачи, Вт/м<sup>2</sup>*C
                <input id="a" class="form__input" type="number" value="20">
            </label>

    <label class="form__label">Теплопроводность тела, Вт/(m*C)
                    <input id="l" class="form__input" type="number" value="0.41">
            </label>

    <label class="form__label">Теплоёмкость тела, Дж/кг*С
            <input id="c" class="form__input" type="number" value="3500">
            </label>

    <label class="form__label">Начальная температура тела, °C
                <input id="tb" class="form__input" type="number" value="35">
            </label>

    <label class="form__label">Коэффициент формы
                    <input id="f" class="form__input" type="number" value="0.37">
            </label>

    <label class="form__label">Шаг по времени, с
                <input id="dt" class="form__input" type="number" value="60">
            </label>

    <label class="form__label">Поверхность тела, м<sup>2</sup>
                <input id="s" class="form__input" type="number" value="0.09">
            </label>

    <label class="form__label">Требуемая среднеобъемная температура, °C
                    <input id="tt" class="form__input" type="number" value="4">
            </label>
    <input class="form__submit" type="submit" value="Расчитать">
  </form>

  <div class="result" id="table">
    <div class="result-col">Время, с</div>
    <div class="result-col">Среднеобъемная температура при сухом охлаждении, °C</div>
    <div class="result-col">Среднеобъемная температура при ГАИ охлаждении, °C</div>
    <div class="result-col">Масса испарившейся воды, г</div>
  </div>
</div>

Sorry but it incorrect. You can see screenshot from qBasic in the post above — Eugene Chefranov, Feb 04 '22 at 15:06
@EugeneChefranov Anyway my recommendations are correct. Never call anything submit in a form either — mplungjan, Feb 04 '22 at 15:19
1. ok 2. ok 3. It's average of `tmw` and `tmd` or whichever is reached first. I don't know but on qBasic it works fine — Eugene Chefranov, Feb 04 '22 at 15:44

How to transfer loop from qBasic to JS?

1 Answers1