Обновление значения поля ввода формы на основе других вводов - PullRequest
0 голосов
/ 19 июня 2020

Я пытаюсь построить своего рода калькулятор, в котором вы вводите все, кроме одной переменной, и получаете последнюю переменную, автоматически заполняемую в форме. Я пытаюсь использовать функцию javascript oninput для формы. Однако я не уверен, как этого добиться. Я написал базовый c пример того, что я хочу ниже (хотя это не работает):

<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;
    }

1 Ответ

0 голосов
/ 19 июня 2020
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)
 }

Что ж, начнем с этого. Это дает вам каждое входное значение индивидуально - отсюда мы можем реализовать соответствующий logi c для объединения входных значений в одно поле ввода. Я сделаю 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
    }

Я не уверен, что вы ищете, но это должно дать вам приличное с начала. Стреляйте, если у вас есть какие-либо вопросы.

Если вы хотите поиграть с этим, вот код: https://codepen.io/Pulse3358/pen/ExPZaVM

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...