Return to Answer

This is a very contrived example, but you can see some concepts here on how to separate "business logic" from both the input data and the display output. I've used jQuery here just for the $, .val(), and .click() helper functions, you could use any other library, or none at all.

http://jsfiddle.net/Wd49U/

Some notes:

The input is handled by passing in callback functions which return the value to be used, this callback style offers extreme flexibility in where and how you want to get your data into the calculator.

I assign the "click" handler outside of the calculator function because that method of triggering it, isn't really the calculators responsibility, maybe in another case you would want to call run() on a timer, or from another event.

Most importantly, it really depends on your specific use case for what the best way might be. I hope this helps you get some ideas.

This is a very contrived example, but you can see some concepts here on how to separate "business logic" from both the input data and the display output. I've used jQuery here just for the $, .val(), and .click() helper functions, you could use any other library, or none at all.

HTML:

<p>First Number</p>
<p><input type="text" id="num1"></p>
<p>Second Number</p>
<p><input type="text" id="num2"></p>
<p>Third Number</p>
<p><input type="text" id="num3"></p>
<p><input type="button" value="Calculate" id="btntrigger"></p>
<p>Result</p>
<p><input type="text" id="result"></p>

Javascript:

function Calculator(options) {
  this.options = options;
}
Calculator.prototype.run = function() {
  return (parseInt(this.options.getN1()) + parseInt(this.options.getN2())) *this.options.getN3();
};
var calc = new Calculator({
  getN1: function() { return $('#num1').val(); },
  getN2: function() { return $('#num2').val(); },
  getN3: function() { return $('#num3').val(); },
});
$('#btntrigger').click(function(){
  $('#result').val(calc.run());
});  

Live Demo: http://jsfiddle.net/Wd49U/

Some notes:

The input is handled by passing in callback functions which return the value to be used, this callback style offers extreme flexibility in where and how you want to get your data into the calculator.

I assign the "click" handler outside of the calculator function because that method of triggering it, isn't really the calculators responsibility, maybe in another case you would want to call run() on a timer, or from another event.

Most importantly, it really depends on your specific use case for what the best way might be. I hope this helps you get some ideas.