Added furtherly.
Inspired by the idea you might have to do this work for both heavier and multiple cases, I created a solution that goes widely beyond what your precise question.
It's a function whose argument is a description of the equation factors, in a very compact syntax derived from the one I suggested at the end of this post. Once invoked, not only it binds the needed computation when input changes, but also:
- creates the HTML inputs for the factors
- builds the equation expression
I don't even know if this may match your needs, but it was fun to do... :)
Here it is, with a few number of different equations as a demonstrator:
function equation(factors) {
// prepare factors for computing
var matches,
sign,
values,
valTypes = {'[': ']', '{': '}'};
factors = factors.map(function(factor) {
matches = factor.match(/^([+-])?([\d.]+)([*\/^])([[{][^\]}]+[\]}])$/);
if (!!matches) {
values = matches[4];
if (values.substr(-1) == valTypes[values[0]]) {
sign = matches[1] ? matches[1] : '+';
return {
coef: sign + matches[2], calc: matches[3], values: JSON.parse(values)
};
}
}
alert('Syntax error in factor:\n' + factor);
});
// build HTML variable part
var $factors = $('#factors'),
$select,
$input,
equation,
coef,
where = [];
$factors.empty();
equation = factors.reduce(function(result, factor, index) {
// BTW create <select>
$input = $('\
<div class="col-md-3">\
<label for="sel' + (index + 1) + '">Input #' + (index + 1) + '</label>\
<select class="form-control" id="sel' + (index + 1) + '">\
</select>\
</div>\
').appendTo($factors);
$select = $('select', $input);
values = factor.values;
for (var key in values) {
// create <option>
$select.append('\
<option value="' + values[key] + '">\
' + ($.isArray(values) ? values[key] : key) + '\
</option>\
');
// populate "where" if needed
if (!$.isArray(values)) {
where.push('`' + key + '=' + values[key] + '`');
}
}
// build equation expression
coef = factor.coef;
sign = (index > 0 || coef[0] == '-') ? coef[0] : '';
return result +
sign + ' ' + coef.substr(1) + ' ' + factor.calc + 'Input_' + (index + 1) + ' ';
}, '');
if (where.length > 1) {
where[where.length - 1] = 'and ' + where[where.length - 1];
}
$('#equation').text(
'` =' + equation + '`' + (where.length ? (' where ' + where.join(', ')) : '')
);
// bind evaluation when some input changes
$('.form-control').change(function() {
$('#result').text(factors.reduce(function(result, factor, index) {
var value = $('#sel' + (index + 1)).val();
switch (factor.calc) {
case '*': return result + factor.coef * value;
case '/': return result + factor.coef / value;
case '^': return result + Math.pow(factor.coef, value);
}
}, 0) + ' widgets');
});
// force 1st evaluation
$select.change();
}
// build equations set
var equations = [
[
'2*[1, 2, 3]',
'3*[7, 8, 9]'
],
[
'2*[1, 2, 3, 4]',
'3*[4, 5, 6, 7]',
'5*{"A": 1, "B": 2, "C": 3}', // WARNING: syntax must be JSON-compliant
'1.2*[5, 1, 2, 3]'
],
[
'2*[1, 2, 3, 4]',
'-3*[4, 5, 6, 7]',
'5/{"A": 1, "B": 2, "C": 3}', // WARNING: syntax must be JSON-compliant
'1.2^[5, 1, 2, 3]'
]
];
// build equations set
var $set = $('#equations-set');
for (let i in equations) {
let equation = JSON.stringify(equations[i]);
equation = equation.substr(1, equation.length - 2)
.replace(/","/g, '"\n"').replace(/(^"|"$)/gm, '').replace(/\\"/g, '"');
$set.append('\
<option value="' + i + '" title="' + equation + '">\
' + equation.replace(/\n/g, ' -- ').replace(/"/g, '"').substr(0,50) + '\
</option>\
');
}
// bind equation choice and use first one by default
$set.change(function() {
equation(equations[this.value]);
}).change();
<head>
<meta charset="UTF-8">
<title>Using Select Boxes to Drive Equation Output</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Awesome Model to Predict Cool Stuff</h1>
<p>Choose a source: <select id="equations-set"></select>
<br /><mark id="source"></mark>
</p>
<p>This is a test. Make some selections below.</p>
</div>
</div>
<hr>
<div class="row" id="factors">
<!-- here come the equation factors -->
</div>
<div class="row">
<div class="col-md-12">
<br>
<p class="text-center"><em>Note the underlying super complicated modeling equation is <span id="equation"></span></em></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 class="text-center">After putting this through the model, your results are...</h4>
<div id="result" class="alert alert-info text-center"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Note. Since I'm not used to MathJax, I didn't try to fix this bug: after using a first equation, when switching to another one, the expression mathematical style is not refreshed.
Initial answer.
To be honest I must confess I don't see why you look for possible improvements for something which looks so easy and light.
Maybe because, as you said that "This is a gross simplification", you plan to apply this to a huge number of factors?
Anyway here is what I think about each of your questions.
Should I be looping through the inputs?
I can't figure out which way you imagine this would be possible, at least in the current form of expressing the equation (but look also at my suggestion at the end of this post).
In the other hand, if you're concerned by performance aspect, you might choose to directly get values rather than using jQuery.
So instead of:
var input_1 = $('#sel1');
...
var result = 2 * input_1.val() + ...
you might write:
var result = 2 * sel1.value + ...
When/how should I be calling the update() function?
Clearly here, in order to conform to current best practices, you should not use HTML onchange attributes to do it.
Instead of:
<select class="form-control" id="sel1" onchange="update()">
you should write this in HTML part:
<select class="form-control" id="sel1">
then in the <script> part:
$('.form-control').change(function() {
var result = ...
$('#result').text(result + " widgets");
});
Where is the proper place to put my scripts -- that is head vs. body vs. external .js file?
The way you used is tending to be the preferred one, and I agree.
Locating scripts at the end of the <body> (obviously assumed you place the exernal libraries first) has the advantage of avoiding to use body.onload or $(document).ready().
Last on this point: yes, your own script could be contained in an external .js, but in the current case it's so light that it's not worth it, IMO.
Is using onchange a good approach? Is there a better approach?
I remembered there was an issue with Firefox regarding onchange event not firing before loosing focus if keyboard was used (see this bug). But actually I checked it works now, so you might be concerned only if you want to be compatible with some old browsers versions.
In such a case you might choose a setInterval() approach...
Should I be assigning the values, e.g. A = 1, B = 2, and C = 3 in the HTML option attributes or is this better handled in the script?
Your current way of assigning values in the HTML seems the best. It takes advantage of what HTML <option value> attribute is made for: directly having a "real" value while the shown value on page is whatever else.
Beyond your questions, a suggestion
Inspired by your question about loops, and again because you presented your current example as a "gross simplification", here is a suggestion that might be of interest if you have to manage equations with a wide number of factors.
First based on the simple case of your example, where factors are only added together and each factor looks like coef * some_input.value, here is how you might proceed:
var coefs = [2, 3, 5, 1.2];
$('.form-control').change(function() {
$('#result').text(coefs.reduce(function(result, coef, index) {
return result + coef * document.getElementById('sel' + (index + 1)).value;
}, 0) + " widgets");
});
The advantage is that you only have to populate the factors array, rather of writing the complete expression of the equation.
Note that, in the other hand, this will have a performance impact!
Now imagine we have a more complex equation, where factors are not always added together, and/or coefs not always act as multiplicator. E. g.:
2 * Input1 - 3 * Input2 + 5 / Input3 + 1.2 ^ Input4
Then we may adapt the process like this:
(edit: this version has been simplified since first post)
var factors = [
{coef: 2, calc: '*'},
{coef: -3, calc: '*'},
{coef: 5, calc: '/'},
{coef: 1.2, calc: '^'}
];
$('.form-control').change(function() {
$('#result').text(factors.reduce(function(result, factor, index) {
var value = document.getElementById('sel' + (index + 1)).value;
switch (factor.calc) {
case '*': return result + factor.coef * value;
case '/': return result + factor.coef / value;
case '^': return result + Math.pow(factor.coef, value);
}
}, 0) + " widgets");
});
If needed, we may also consider more improvements, like adding an ord property to define how coef affects value.
So for instance applied to the last factor above:
{coef: 1.2, calc: '^', ord: '>'} -> Math.pow(factor.coef, value){coef: 1.2, calc: '^', ord: '<'} -> Math.powe(value, factor.coef)
And so on...
But obviously this may be worth only if its own complexity is counterbalanced by the one of very huge and complex cases.
Otherwise it's only for fun :)
