JK said:
This is an easy one, but I'm a JS newbie. I want to write a function that
determines input value. If 0 - 100 than will use input as % (i.e., 3 would
become .03 and used for calculations); otherwise, as dollar value (i.e.,
1,000 would become $1,000 and used for calculations). In other words, I want
input.value 3 to either be input.value 1 * input.value 2, or simply =
input.value 1. Please be specific about placement of function (header or
body, placement inside another function, etc), I am just a newbie.
Looks can be deceiving. Presuming you have validated the input, you
can use:
var a = input.value
if ( a < 0 ) {
return 'input is negative';
} else if (! a > 100) {
// use as a percentage
} else {
// use as a dollar value
}
I've assumed that you don't want negative values.
But this rather trivial solution hides many issues. For a useful
introduction to JavaScript (but by no means thorough), try:
<URL:
http://www.w3schools.com>
For more information on doing mathematics with JavaScript, try the
link below which includes hints on validation also:
<URL:
http://www.merlyn.demon.co.uk/js-index.htm>
In regard to where to put the script, usually scripts are put in the
head, but they can appear almost anywhere in the document. Where you
put them depends on various factors, but for a script like this, the
head is probably best.
As for what to code to put into separate functions and what to keep
in a monolithic function, that normally depends on how much re-use
you intend to make of the code and maintenance issues. Most coders
will break code into logical blocks and create functions. Anything
that must be done in more than one place, or that requires high
maintenance, should be in a separate function.
Below is a script that gives an example of what you may be trying to
do - it does some input validation, some maths with integers and
formats the output to look like decimal currency. It does not deal
with decimal values (other than the $ input) or comma 'thousands'
separators.
There are also hints in the HTML to let users know what is and isn't
valid input, as well as what the total actually is. Hopefully it
gives you some idea of how to go about whatever it is you are trying
to do - if you need other or different features, ask again.
<style type="text/css">
table {border-collapse: collapse;
border: 1px solid blue;}
td {border: 1px solid grey; padding: 2px;}
..tip {font-size: 80%; color: #666699;}
</style>
<script type="text/javascript">
function doCalc(f) {
// Get form values
var a = f.inA.value;
var b = f.inB.value;
// Validate input - a must be digits only and 0 <= a <= 100
if (/\D+/.test(a) || a < 0 || a > 100 || a == '') {
alert('Percentage must be an integer from 0 to 100');
if (f.inA.focus){
f.inA.focus();
}
return;
} else {
// use '+' to convert a to a number
a = +a;
}
// B should also be only digits and between 0 and 999999
if (!/^\d{1,4}.\d\d$/.test(b) || b < 0 || b > 999999 || b == '') {
alert('Dollar value must be 0.00 to 9999.99');
if (f.inB.focus){
f.inB.focus();
}
return;
} else {
// Work in whole cents to make everything simpler
// Multiplying b by 100 will convert it to a number
b = b*100;
}
// Do calcs - the + '' at end converts t to a
// string so we can use substring next
var t = Math.round((b + b*a/100))+ '';
// Save last two digits
var c = t.substring((j = t.length - 2));
// Now divide t by 100 and truncate cents
t = Math.floor(t/100);
// Write values to output, adding in a decimal point
f.outA.value = t + '.' + c;
}
</script>
<form action="">
<table>
<tr>
<td>
Enter a percentage
<span class="tip">(0 to 100)</span>
</td><td>
<input type="text" name="inA" size="10" value="1">
</td>
</tr><tr>
<td>
Enter a dollar value
<span class="tip">(0.00 to 9999.99)</span>
</td><td>
<input type="text" name="inB" size="10" value="100.00">
</td>
</tr><tr>
<td>
Total
<span class="tip">($ plus %)</span>
</td><td>
<input type="text" name="outA" size="10">
</td>
</tr><tr>
<td>
<input type="reset">
</td>
<td>
<input type="button" value="Do calc" onclick="
doCalc(this.form);
"><br>
<span class="tip">click to calc value</span>
</td>
</tr>
</table>
</form>
