Add two textbox values and display the sum in a third textbox automatically

<div>  
                <label>
                    <span>price</span>
                    <input placeholder="price" type="text" name="price" id="pri" onkeyup="sum();" required>
                </label>
               <script> function sum() {
            var txtFirstNumberValue = document.getElementById('pri').value;
            var txtSecondNumberValue = document.getElementById('load').value;
            var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue);
            if (!isNaN(result)) {
                document.getElementById('total').value = result;
            }
        }</script>
            </div>
             <div>
                <label>
                    <span>loading charge</span>
                    <input placeholder="loading" type="text" name="loading" id="load" onkeyup="sum();"  required>
                </label>
            </div>           
              <div>
                <label>
                    <span>Total Price</span>
                    <input placeholder="loading" type="text" name="loading" id="total"  required>
                </label>
            </div>

Demo:

price

loading charge

Total Price