<!DOCTYPE html>
<html>

<body>
    <h2>Enter Some Text</h2>

    <p>Event will be fired when the input element lose focus after value update.</p>
    <input type="text" name="txt" value="" onchange="myFunction(this.value)">
	 <input class="form-control" id="txttotal" value="" name="txttotal1" type="text">
	   <input class="form-control" id="txtpaid" value="" name="txtpaid1" onChange="add_number();" type="text">
	    <input class="form-control" id="txtbalance" value="" name="txtbalance" type="text">
    <p id='show'></p>
    
    <script>
        function myFunction(val) {
            var x = document.getElementById('show');
            x.innerHTML = "Entered Value is: " + val;
        }
		function add_number() {
               
                var first_number = parseInt(document.getElementById("txttotal").value);
                var second_number = parseInt(document.getElementById("txtpaid").value);
                var result = first_number - second_number;
     
                document.getElementById("txtbalance").value = result;
            }
    </script>
</body>

</html>
