Is there a way to switch between 2 functions onclick so that the first one adds together and a second one subtracts variables?

Question

So basicly I want to make a program that would have 2 inputs and a button in HTML. The first input would be the starter value (stvalue) and the second would be the value added/subtracted (value) and output a sum (sum) that would constantly change. So when I enter the 2 values (stvalue) and (value) and click the button it would first add them together (sum) , and then I would write in a different value (value) to be subtracted on the second click from the added together sum (sum) . And then if I write in another value (value) and click the button the third time, it would add the subtracted sum (sum) and the value I wrote (value) together. And it would continuosly add/subtract the values I write in to/from the "sum" value on clicks.

I dont know if even there is a way to do this, I tried some versions but they didnt really worked out the way I wanted them.

I managed to make functions switch on click and add the values together but then I wasnt able to use that added together value in the second function where it would be subtraced.

 var stValue; var value; var sum; function buttonClick() { var stValue = parseFloat(document.getElementById("stvalue").value); var value = parseFloat(document.getElementById("value").value); var sum = stValue + value; console.log(sum); this.onclick = notButtonClick; //function reference to nBC } function notButtonClick() { var value = parseFloat(document.getElementById("value").value); var sum = sum - value; console.log(sum); this.onclick = buttonClick; //function reference to original function } var el = document.getElementById("button"); //let for ES6 aficionados el.onclick = buttonClick; //again, function reference, no ()

 <input id="stvalue" type="number" placeholder="kezdo" /> <input id="value" type="number" placeholder="ertek" /> <button id="button" onclick="buttonClick()">Start</button>

I hope I managed to explain it pretty well and its not too confusing. Thank you for your time, I really appriciate it.

Answer 1

To assign an event handler to an event, and pass parameters along at the time of assignment, execute a function that returns a function, which is then provided as an event handler to the next event assignment. This uses function encapsulation to make the parameters available to the next event execution.

 let stValue, value, sum; function buttonClick (sum, val) { return function () { let stValue = (undefined === sum)? parseFloat(document.getElementById("stvalue").value): sum; let value = (undefined === val)? parseFloat(document.getElementById("value").value): val; let ret = stValue + value; console.log(ret); this.onclick = notButtonClick(sum, val); } } function notButtonClick (sum, val) { return function () { let stValue = (undefined === sum)? parseFloat(document.getElementById("stvalue").value): sum; let value = (undefined === val)? parseFloat(document.getElementById("value").value): val; let ret = stValue - value; console.log(ret); this.onclick = buttonClick(sum, val); } } var el = document.getElementById("button").onclick = buttonClick();

 <input id="stvalue" type="number" placeholder="kezdo" /> <input id="value" type="number" placeholder="ertek" /> <button id="button" onclick="buttonClick()">Start</button>