Can I make calculation outputs dynamically update in Javascript?

Question

I am modelling a nuclear reactor in JavaScript/HTML and am struggling with dynamic updates of the results I'm interested in.

Reactor temperature and reactor pressure are both dependent on both control rod height and coolant pump flow. Is there a way of having the resultant numbers displayed on the screen such that they will dynamically update as the user changes the inputs?

I can make this work with buttons to trigger the calculation of the temperature/pressure - but would rather have it on screen if possible!

Happy to use jQuery/AJAX solutions, but don't honestly know where to start or what it really is I would be asking them to do - I don't want to just get information from another page, I want to work out a constantly changing calculation.

Thank you!

HTML

<div id="Reactor">
<button onClick = "IncCRH()">Increase Control Rod Height</button>
<button onClick = "DecCRH()">Decrease Control Rod Height</button>
<div id="result"></div>
<br>
<button onClick="test()">Control Rod Height</button>
<br>
<br>
<button onClick = "IncCPF()">Increase Coolant Pump Flow</button>
<button onClick = "DecCPF()">Decrease Coolant Pump Flow</button>
<br>
<br>
<button onClick = "test2()"> Coolant Pump Flow</button>
<br>
<br>
<p id = "ReacTemp"></p>
<br>
<br>
<p id = "ReacPres"></p>
    </div>

JavaScript

var ControlRodHeight = 50;
var CoolantPumpFlow = 20;

function IncCRH(){
    user = ++ControlRodHeight;
    if (ControlRodHeight > 100) {
        ControlRodHeight = 100;
}
ReactorTemperature = (445 + (ControlRodHeight*4.5)  -(CoolantPumpFlow*2.3));
ReactorPressure = (10 + (ControlRodHeight*1.36)-(CoolantPumpFlow*0.0065));
}

function DecCRH() {
    user = --ControlRodHeight;
    if (ControlRodHeight < 0) {
        ControlRodHeight = 0
    }
ReactorTemperature = (445 + (ControlRodHeight*4.5)-(CoolantPumpFlow*2.3));
ReactorPressure = (10 + (ControlRodHeight*1.36)-(CoolantPumpFlow*0.0065));
}

function test(){
alert (ControlRodHeight);
}

function IncCPF(){
user = ++CoolantPumpFlow;
if (CoolantPumpFlow > 40) {
    CoolantPumpFlow = 40;
}
ReactorTemperature = (445 + (ControlRodHeight*4.5)-(CoolantPumpFlow*2.3));
ReactorPressure = (10 + (ControlRodHeight*1.36)-(CoolantPumpFlow*0.0065));
}

function DecCPF(){
user = --CoolantPumpFlow;
if (CoolantPumpFlow < 0) {
    CoolantPumpFlow = 0;
}
ReactorTemperature = (445 + (ControlRodHeight*4.5)   -(CoolantPumpFlow*2.3));
ReactorPressure = (10 + (ControlRodHeight*1.36)-(CoolantPumpFlow*0.0065));
}

function test2(){
    alert (CoolantPumpFlow);
 }

var ReacTemp = ReactorTemperature.toFixed(0);

document.getElementById("ReacTemp").innerHTML = "Reactor Temperature is " + ReacTemp

var ReacPres = ReactorPressure.toFixed(0);

document.getElementById("ReacPres").innerHTML = "Reactor Pressure is " + ReacPres

Answer 1

At the end of each function that increases or decreases your variables, update the display in the DOM.

var ControlRodHeight = 50;
var CoolantPumpFlow = 20;
var ReactorTemperature = 0;
var ReactorPressure = 0;

function IncCRH() {
  user = ++ControlRodHeight;
  if (ControlRodHeight > 100) {
    ControlRodHeight = 100;
  }
  ReactorTemperature = (445 + (ControlRodHeight * 4.5) - (CoolantPumpFlow * 2.3));
  ReactorPressure = (10 + (ControlRodHeight * 1.36) - (CoolantPumpFlow * 0.0065));
  displayResults();
}

function DecCRH() {
  user = --ControlRodHeight;
  if (ControlRodHeight < 0) {
    ControlRodHeight = 0
  }
  ReactorTemperature = (445 + (ControlRodHeight * 4.5) - (CoolantPumpFlow * 2.3));
  ReactorPressure = (10 + (ControlRodHeight * 1.36) - (CoolantPumpFlow * 0.0065));
  displayResults();
}

function test() {
  alert(ControlRodHeight);
}

function IncCPF() {
  user = ++CoolantPumpFlow;
  if (CoolantPumpFlow > 40) {
    CoolantPumpFlow = 40;
  }
  ReactorTemperature = (445 + (ControlRodHeight * 4.5) - (CoolantPumpFlow * 2.3));
  ReactorPressure = (10 + (ControlRodHeight * 1.36) - (CoolantPumpFlow * 0.0065));
  displayResults();
}

function DecCPF() {
  user = --CoolantPumpFlow;
  if (CoolantPumpFlow < 0) {
    CoolantPumpFlow = 0;
  }
  ReactorTemperature = (445 + (ControlRodHeight * 4.5) - (CoolantPumpFlow * 2.3));
  ReactorPressure = (10 + (ControlRodHeight * 1.36) - (CoolantPumpFlow * 0.0065));
  displayResults();
}

function test2() {
  alert(CoolantPumpFlow);
}

function displayResults() {
  var ReacTemp = ReactorTemperature.toFixed(0);

  document.getElementById("ReacTemp").innerHTML = "Reactor Temperature is " + ReacTemp

  var ReacPres = ReactorPressure.toFixed(0);

  document.getElementById("ReacPres").innerHTML = "Reactor Pressure is " + ReacPres
}

displayResults()

<div id="Reactor">
  <button onClick="IncCRH()">Increase Control Rod Height</button>
  <button onClick="DecCRH()">Decrease Control Rod Height</button>
  <div id="result"></div>
  <br>
  <button onClick="test()">Control Rod Height</button>
  <br>
  <br>
  <button onClick="IncCPF()">Increase Coolant Pump Flow</button>
  <button onClick="DecCPF()">Decrease Coolant Pump Flow</button>
  <br>
  <br>
  <button onClick="test2()"> Coolant Pump Flow</button>
  <br>
  <br>
  <p id="ReacTemp"></p>
  <br>
  <br>
  <p id="ReacPres"></p>
</div>

Answer 2

You can use the onkeyup property so it will call the function every time a key is pressed. If someone is typing into an input form field then you could do this:

<input type="text" onkeyup="myFunction()">

You can also do it in JavaScript if you want but it isn't necessary.

var input = document.getElementById('#reactor');
input.onkeyup = function(){call MyFunction()};