根据其他输入更新表单输入字段值

Question

我正在尝试构建一个计算器，您可以在其中输入除一个变量以外的所有变量，并在表单中自动填充最终变量。我正在使用表单的 javascript 函数 oninput 尝试此操作。但是我不确定如何实现这一点。我在下面写了一个我想要的基本示例（尽管这不起作用）：

<form oninput="thermal()">
        <input type="number" name="avgTemp" id="avgTemp" class="five-col">
        <input type="number" name="volume" id="volume" class="five-col"> 
        <input type="number" name="deltaTemp" id="deltaTemp" class="five-col">
        <input type="number" name="Q" id="Q" class="five-col">
</form>

    function thermal(){
        var volume = document.getElementById("volume");
        var deltaTemp= document.getElementById("deltaTemp");
        value = deltaTemp;
    }

Answer 1

function thermal(){
    let avgTemp = document.getElementById("avgTemp").value;
    let volume = document.getElementById("volume").value;
    let deltaTemp = document.getElementById("deltaTemp").value;
    let q = document.getElementById("Q") // no value here yet; we will make this our total

    console.log(avgTemp, volume, deltaTemp, q)
 }

好吧，让我们从这个开始。这会分别为您提供每个输入值 - 从这里，我们可以实现相关逻辑以将输入值组合到一个输入字段中。我会让Q 输入我们的“总数”，这样您就可以了解组合的外观。

function thermal(){
    let avgTemp = document.getElementById("avgTemp").value;
    let volume = document.getElementById("volume").value;
    let deltaTemp = document.getElementById("deltaTemp").value;
    let q = document.getElementById("Q");

    let total = Number(avgTemp) + Number(volume) + Number(deltaTemp)
    console.log(total)
    q.value = total
    }

我不确定您在寻找什么，但这应该会给您一个不错的开端。如果您有任何问题，请立即开火。

如果你想玩弄它，这里是 codepen： https://codepen.io/Pulse3358/pen/ExPZaVM