Rounding answer DOWN to 2 decimal places / use dollar sign

This site is best viewed in a modern browser with JavaScript enabled.

Rounding answer DOWN to 2 decimal places / use dollar sign

Duke_Will

Here is my code:

<script type="text/javascript" language="Javascript">

var v1 = 0;
var v2 = .00939740;
var answer = 0;

function calculate () {
// The Calculation: change operator in this equation to change the calculation
answer = v1 * v2;

var elem;
elem = document.getElementById("v1");
elem.value = v1;
elem = document.getElementById("v2");
elem.value = v2;

elem = document.getElementById("answer");
elem.value = answer;
}

function setValue(elem) {
var val = 0.0;
if (elem.value != "") {
val = parseFloat(elem.value);
}
else {
val = 0.0;
}
switch (elem.id) {
case "v1": v1 = val; break;
case "v2": v2 = val; break;
}
calculate();
}
</script>

Right now, it displays my answer as a 15 decimal place number. I want it to be a 2 decimal place number and I want it to round down.

And, is there a way to have it display with a dollar sign in front?

Lastly, is there a way to have it display with the answer yellow highlighted?

(I am not a programmer, I just make do!)

Logic_Ali

Try using the forum's search facility, using words like 'rounding' or 'decimal places'. We don't need to answer this one again.

xelawho

FYI, it's a very bad idea to have variables and element ID's sharing the same name. It makes IE freak out.

<script type="text/javascript">

var val = 5;
var val2 = .00939740;
var ans = 0;

function calculate () {
// The Calculation: change operator in this equation to change the calculation
ans = val * val2;

var elem;
document.getElementById("v1").value = val;
document.getElementById("v2").value = val2;

document.getElementById("answer").value = "$"+ans.toFixed(2);
document.getElementById("answer").style.backgroundColor="yellow";
}

function setValue(elem) {
var val = 0.0;
if (elem.value != "") {
val = parseFloat(elem.value);
}
else {
val = 0.0;
}
switch (elem.id) {
case "v1": v1 = val; break;
case "v2": v2 = val; break;
}
calculate();
}
</script>

Duke_Will

I want to thank you for helping this non-programmer! However, it works but not quite.

Here is my original page with the code I had...

http://tinyurl.com/april29-old

Here is the new page with your code...

http://tinyurl.com/april29-new

Note that all that is to happen is the web visitor is going to input a number into box 1. Note that it shows "0" but when you type any number, the zero disappears and the new number takes its place. Seems like a good way.

With your amended code, all appears very cool except I cannot change that original "5" number, it is hard-wired in and won't change. I even changed your first line to be...

var val = 0;

...but that didn't work either. Thanks if you can help.

xelawho

I have very little idea what's supposed to be going on there, but if you want a text input to start off with a value why not just write it that way?

<input type="text" id="v1" value="0">

xelawho

I think I get it now... does this work better?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>

Enter VIP points
<input type="text" id="v1" onkeyup="calculate()" value="0"/><br><br>
profit share multiplier
<input type="text" id="v2" onkeyup="calculate()" value=".00939740"/><br><br>
Retail Profit Share Award
<input type="text" id="answer" readonly="readonly"/>

<script type="text/javascript">


function calculate () {
// The Calculation: change operator in this equation to change the calculation
document.getElementById("v1").value=Number(document.getElementById("v1").value);
ans = document.getElementById("v1").value * document.getElementById("v2").value;

if (!isNaN(ans)&&ans!=0){
document.getElementById("answer").value = "$"+ans.toFixed(2);
document.getElementById("answer").style.backgroundColor="yellow";
	} else {
document.getElementById("answer").value = "";
document.getElementById("answer").style.backgroundColor="white";
	}
}
</script>
</body>
</html>

Duke_Will

xelawho, if I input something other than a number into Box 1, I get "NaN" (which I assume is for "not a number"... and even reloading the page won't fix it so I can enter a number. Thanks.

xelawho

yeah, I was just looking at that... how about this...

function calculate () {
// The Calculation: change operator in this equation to change the calculation
document.getElementById("v1").value=document.getElementById("v1").value.replace(/[^0-9]/, '')*1

ans = document.getElementById("v1").value * document.getElementById("v2").value;

if (!isNaN(ans)&&ans!=0){
document.getElementById("answer").value = "$"+ans.toFixed(2);
document.getElementById("answer").style.backgroundColor="yellow";
	} else {
document.getElementById("answer").value = "";
document.getElementById("answer").style.backgroundColor="white";
	}
}

bionoid

A similar function that should give the same results...

function calculate()
{
	var
		v = parseInt(0 + document.getElementById('v1').value, 10) * parseFloat(0 + document.getElementById('v2').value, 10),
		e = document.getElementById('answer');

e.value = v ? '$' + v.toFixed(2) : '';
e.style.backgroundColor = v ? 'yellow' : 'white';
}

Duke_Will

Thanks, got it all working like I want it now.

Duke_Will

I spoke too soon. Almost there.

If someone changes Box 2 to be something other than what it was when the page first loaded, upon refresh, it does not provide the original value. How can I fix that? Upon refresh or a link or something that says "Get original value for Box 2."

EDIT: Disregard, I made it read-only like Box 3. Seems to work, guess I did it right.

EDIT: How can I make it so the visitor can enter a 2-digit decimal number in Box 1 ("v1")? Perhaps I should force them to enter it with 2 decimal places? How?

I am using this code:

<script type="text/javascript">

function calculate () {
// The Calculation: change operator in this equation to change the calculation
document.getElementById("v1").value=document.getElementById("v1").value.replace(/[^0-9]/, '')*1
document.getElementById("v1").style.backgroundColor="yellow";
ans = document.getElementById("v1").value * document.getElementById("v2").value;
document.getElementById("v2").style.backgroundColor="red";
if (!isNaN(ans)&&ans!=0){
document.getElementById("answer").value = "$"+ans.toFixed(2);
document.getElementById("answer").style.backgroundColor="lightgreen";
	} else {
document.getElementById("answer").value = "";
document.getElementById("answer").style.backgroundColor="white";
	}
}
</script>

See http://tinyurl.com/april29-8.

Duke_Will

I'm getting the "NaN" error for Box 1, as well. I see how correct it (like Box 2) but I'm not skilled enough to pull it off.

Also, about having the person enter a number with 2 digits, I found this page...

http://www.coderanch.com/t/114528/HTML-CSS-JavaScript/decimal-point-restriction

I had already tried a workaround, by asking the visitor to type $123.45 as 12345. (And I added a "/100" to my code. But, that will probably produce too many errors. If anyone knows how to incorporate the coders comments at above link, let me know.

Currently, my (unfinished) page is...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML LANG=en>
<HEAD>
<TITLE>Zeek Rewards Calculator</TITLE>
<META NAME="KEYWORDS" Content="zeek rewards calculator, zeek rewards multiplier, multiplier, calculator, zeek, profit pool">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

<style type="text/css">
body {font-size:100&#37;;}
h1 {font-size:2.5em;font-family:timesnewroman}
h2 {font-size:1.875em;font-family:timesnewroman}
p {font-size:1.5em;font-family:verdana}

body
{
background-color:#BDBDBD;
}
</style>
</HEAD>
<body onload="calculate();">
<blockquote>
<blockquote>
<form<BR /><font size=1><BR />
<h1>Zeek Rewards Calculator</h1>
<h2>To Monitor Your Results</h2>
<BR />
<p>Have you longed for a <em>Zeek Rewards calculator</em> to help you make sure your back office report is in line with what other people are being paid in the daily Retail Profits Pool? Look no more, here it is! Simply input your appropriate amount of VIP points into Box 1 and the results show in Box 3 instantly as you type.</p>
<p>
<input type="text" id="v1" onkeyup="calculate()" value="0"/> (BOX 1) -- Enter VIP points from yesterday for line item immediately prior to last night's run. Enter no decimal, i.e., $123.45 entered as "12345" (no quotes)<BR /><BR />
<input type="text" id="v2" onkeyup="calculate()" value=".00939740" readonly="readonly"//> (BOX 2) -- Multiplier for (today), pool (yesterday), as determined by this site's webmaster.<BR /><BR />
<input type="text" id="answer" readonly="readonly"/> (BOX 3) -- Your calculated Retail Profit Share Award for today (for yesterday's business) according to the multiplier provided by this site's webmaster.<BR /><BR />
(Box 3 changes immediately as you input into Box 1.)<BR /><BR />
If you see a positive answer in Box 3 above, Zeek was profitable last night!<BR /><BR />
Should you see a discrepancy (other than a minor rounding difference), make sure you entered your correct VIP points. Please do not contact the webmaster for support; direct support calls to your sponsor. If both you and your sponsor have double-checked the calculations and feel that the multiplier is incorrect, please contact this webmaster.<BR /><BR />
TIP: Keep two browser tabs (Internet Explorer, Firefox or Chrome) open to your Zeek Rewards site and this site 24/7; don't close the tabs! You'll be visiting each day anyway! Didn't know you could do that?</p>
<p style="color:red">
NOTE: No results are guaranteed but not much in life is! As for Zeek Rewards and their Retail Profit Pool, it's very simple: If they make a profit, we can earn a share in that pool by qualifying. And qualifying is not hard! If Zeek does not make a profit on any given day, we have potential income streams other than the daily pool. Please protect your Zeek business (and mine) by getting proper training for what we can and cannot say about this revolutionary business model.</p>
<p>Best of luck to you with Zeek Rewards!</p>
<p>Legal Disclaimers</p>
<p>Income Disclosure Statement</p>
</form>
</blockquote></blockquote>
<script type="text/javascript">

function calculate () {
// The Calculation: change operator in this equation to change the calculation
document.getElementById("v1").value=document.getElementById("v1").value.replace(/[^0-9]/, '')*1
document.getElementById("v1").style.backgroundColor="yellow";
ans = document.getElementById("v1").value /100 * document.getElementById("v2").value;
document.getElementById("v2").style.backgroundColor="red";
if (!isNaN(ans)&&ans!=0){
document.getElementById("answer").value = "$"+ans.toFixed(2);
document.getElementById("answer").style.backgroundColor="lightgreen";
	} else {
document.getElementById("answer").value = "";
document.getElementById("answer").style.backgroundColor="white";
	}
}
</script>
</BODY>
</HTML>

Also, I would rather have the calculator have a button called "Calculate" and have the operation execute only after the visitor presses the button.