Question

我正在使用JavaScript / HTML对核反应堆进行建模，并且正在努力对我感兴趣的结果进行动态更新。

反应器温度和反应器压力均取决于控制棒高度和冷却剂泵流量。是否有一种方法可以在屏幕上显示结果数字，以便在用户更改输入时动态更新？

我可以使用按钮来触发温度/压力的计算 - 但如果可能的话，我宁愿将它放在屏幕上！

很高兴使用jQuery / AJAX解决方案，但不要老老实实地知道从哪里开始或者我会要求他们做什么 - 我不想从其他页面获取信息，我想制定一个不断变化的计算。

谢谢！

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

您可以使用onkeyup属性，以便每次按下键时都会调用该函数。如果有人在输入表单字段中输入，那么您可以这样做：

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

如果您愿意，也可以在JavaScript中进行，但不是必需的。

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

Answer 2

在每个增加或减少变量的函数结束时，更新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>

我可以在Javascript中动态更新计算输出吗？

2 个答案: