[FIXED] Javascript - How to add results of two text boxes and display the result in a third?

Issue

I have two incrementally adding/subtracting values based on a button with onclick, as seen in below, and I attempted to have the outputs of these two boxes add into a third.

Javascript:

var i = 1;
function buttonClick() {
        i++;
    document.getElementById('inc').value = i;
    }
function buttonClickA() {
        i--;
    document.getElementById('inc').value = i;
    }

  var w = 1;
function buttonClickC() {
        w++;
    document.getElementById('inc1').value = w;
    }
function buttonClickD() {
        w--;
    document.getElementById('inc1').value = w;
    }
function sum() {
        var txtFirstNumberValue = document.getElementById('inc').value;
            var txtSecondNumberValue = document.getElementById('inc1').value;
                var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
                    if (!isNaN(result)) {
                        document.getElementById("tot").value = result;
        }
    }

And the HTML:

<button onclick="buttonClick()">Add</button>
<input type="text" id="inc" value="0">
<button onclick="buttonClickA()">Subtract</button>

<button onclick="buttonClickC()">Add</button>
<input type="text" id="inc1" value="0">
<button onclick="buttonClickD()">Subtract</button>

<input type="text" id="tot" />

It adds a third textbox and the first two work fine, but no new output in the third, not sure what I am doing wrong.

Solution

You haven't called the sum() function. call the sum() function for every button click.

Answered By - M.Tamil
Answer Checked By - David Goodson (JavaFixing Volunteer)