如何使因变量在HTML / javascript中响应和更新？

Question

我希望有人可以帮助我。 我正在为一个（简单的）核反应堆建模，并具有许多变量，这些变量取决于其他变量和用户输入。

在下面的代码中，最初将控制杆高度设置为50％，但用户可以在0到100的范围内上下移动控制杆。反应堆温度直接取决于控制杆高度，但是我可以使其更新。

TEST按钮显示更新的控制杆高度，但是TEMPERATURE按钮将仅显示初始值（基于控制杆高度= 50）。

用户改变控制棒的高度时是否可以使反应堆温度更新？

谢谢！

的HTML

<div id="game">
<button onClick = "IncCRH()">Increase Control Rod Height</button>
<button onClick = "DecCRH()">Decrease Control Rod Height</button>
<div id="result"></div>
<br>
<br>
<button onClick="test()">TEST</button>
<br>
<br>
<button onClick="ReacTemp()">TEMPERATURE</button>
</div>

Java脚本

var ControlRodHeight = 50;
var ReactorTemperature = (250 + (ControlRodHeight*20));

function IncCRH(){
    user = ++ControlRodHeight;
    if (ControlRodHeight > 100)
    ControlRodHeight = 100;
}
function DecCRH() {
    user = --ControlRodHeight;
    if (ControlRodHeight < 0)
    ControlRodHeight = 0
}

function test(){
    alert (ControlRodHeight);
}

function ReacTemp(){
    alert (ReactorTemperature);
}

Answer 1

更改ControlRodHeight时，您必须手动重新计算ReactorTemperature：

function IncCRH(){
    user = ++ControlRodHeight;
    if (ControlRodHeight > 100) {
        ControlRodHeight = 100;
    }
    ReactorTemperature = (250 + (ControlRodHeight*20));
}

（或调用正在执行此操作的函数，以便不重复代码。）

Answer 2

您需要在这些函数中将ReactorTemperature值更改为具有更新后的值var ControlRodHeight = 50; var ReactorTemperature =（250 +（ControlRodHeight * 20））;

function IncCRH(){
    user = ++ControlRodHeight;
    if (ControlRodHeight > 100){
    ControlRodHeight = 100;
}
    ReactorTemperature = (250 + (ControlRodHeight*20));
}
function DecCRH() {
    user = --ControlRodHeight;
    if (ControlRodHeight < 0){
    ControlRodHeight = 0
}
ReactorTemperature = (250 + (ControlRodHeight*20));
}