JSFiddle - React, Tailwind, and code Playground

by Dimitar Christoff

HTML

<tr>
    <td><input type="text" name="billable_rate" id="billable_rate"></td>
</tr>
<tr>
    <td><input type="text" name="travel_rate" id="travel_rate"></td>
</tr>

JavaScript

(function() {
    var slowFocus = function(what) {
        var timer;
        clearTimeout(timer);
        timer = setTimeout(function() {
            what.focus();
        }, 300);
    };
    
    var calcTotal = function(field) {
        var ValidChars = "0123456789.";
        var sText = field.value;
        var IsNumber=true;
        var Char;
        var total = 0.00;
        var field2 = field.name;
        
        for (i = 0; i < sText.length && IsNumber == true; i++){
            Char = sText.charAt(i); 
            if (ValidChars.indexOf(Char) == -1){
                IsNumber = false;
            }
        }
        
        if(IsNumber){
            var billableRate = document.getElementById("billable_rate").value*1;
            var travelRate = document.getElementById("travel_rate").value*1;
            total = billableRate+travelRate;
            subTotal = document.getElementById('subTotal');
            replaceText(subTotal, total);
        } else {
            //alert("not a valid number");
            switch (field2){
                case 'billable_rate':
                    field.value = '';
                    
                    slowFocus(field);
                   
                break;
                case 'travel_rate':
                    field.value = "";
                    slowFocus(field);
                break;
            }
        }
    }
    
    document.getElementById("billable_rate").onchange = function() {
        calcTotal(this);
    };
    
    document.getElementById("travel_rate").onchange = function() {
        calcTotal(this);
    };
})();