JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"  class='input'  onchange='updateTotal();'>
<input type="text"  class='input'  onchange='updateTotal();'>
<input type="text"  class='input'  onchange='updateTotal();'>
<input type="text"  class='input'  onchange='updateTotal();'>
                
<input name="total" type="text" id="total" value="">

JavaScript

function updateTotal() {
    var total = "tttt";//
    var list = document.getElementsByClassName("input");
    var values = [];
    for(var i = 0; i < list.length; ++i) {
        values.push(parseFloat(list[i].value));
    }
    total = values.reduce(function(previousValue, currentValue, index, array){
        return previousValue + currentValue;
    });
    document.getElementById("total").value = total;    
}