Simple JS Math

Trying to figure out why this SIMPLE math function will not work. If anyone can help me that would be great....Thanks

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Price</title>
<SCRIPT LANGUAGE="JavaScript">
function  doMath() {
var one = eval(document.theForm.elements[0].value)
var two = eval(document.theForm.elements[1].value)
var prod = one*two
var outp = "" 

}
  document.getElementById('outtab').innerHTML = outp 
} 
// End -->
</SCRIPT>
</head>
<body>
<div>
<form name="theForm">
<p>Please select:</p>
<select name="one">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>

<p>Price</p>
$<input name="two" DISABLED type="text" size="4" value="2.00">

<BR>Total:<SPAN ID="outtab"></SPAN>

<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

i DIDNT add the full code, sorry...here is a revision to it...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Price</title>
<SCRIPT LANGUAGE="JavaScript">
function  doMath() {
var one = eval(document.theForm.elements[0].value)
var two = eval(document.theForm.elements[1].value)
var outp = "" 
var prod = document.times.mult.value 
    ans = one*two
    outp =  ans 

}
  document.getElementById('outtab').innerHTML = outp 
} 
</SCRIPT>
</head>
<body>
<div>
<form name="theForm">
<p>Please select:</p>
<select name="one">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>

<p>Price</p>
$<input name="two" DISABLED type="text" size="4" value="2.00">

<BR><BR>Total:<SPAN ID="outtab"></SPAN>
<BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

Revision again, I got it working:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Price</title>
<SCRIPT LANGUAGE="JavaScript">
function  doMath() {
var one = eval(document.theForm.elements[0].value)
var two = eval(document.theForm.elements[1].value)
var outp = "" 
	{
    ans = one*two
    outp = " " + "$" + ans + ".00" + "/Month"

}
  document.getElementById('outtab').innerHTML = outp 
} 
</SCRIPT>
</head>
<body>
<div>
<form name="theForm">
<p>Please select:</p>
<select name="one">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>

<p>Price</p>
$<input name="two" DISABLED type="text" size="4" value="2.00">

<BR><BR>Total:<SPAN ID="outtab"></SPAN>
<BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

Pat,

eval() :icon_eek:

It's part of javascript but seldom needs to be used; arguably never.

Number() returns a floating point conversion of its argument.

function doMath() {
  var one = Number(document.theForm.elements[0].value);
  var two = Number(document.theForm.elements[1].value);
  ans = one * two;
  outp = " " + "$" + ans.toFixed(2) + "/Month";
  document.getElementById('outtab').innerHTML = outp;
}

Remember to terminate each statement with a ; . Javascript does its best but may one day do something unexpected with unterminated statements. Proper termination also aids readability of the code.Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,682 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

4 Months Ago

Thanks, Airshow I didn't think of that! lol...

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

So now I want to do something a little different since i have a basic code there. I want to add a case switch to it. I want to price to change when they select certain one from the options...is there anyway of incorporating that?

<option selected="selected">5</option>
  <option>10</option>
  <option>15</option>
  <option>20</option>
  <option>30</option>
  <option>50</option>
  <option>100</option>
</select>

Like say:

case 1: document.write('2.00'); break;
case 2: document.write('1.00'); break;
case 3: document.write('0.75'); break;
case 4: document.write('0.50'); break;

and have it displayed in the

$<input name="two" DISABLED type="text" size="4" value="2.00">

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

oops, if 10 and 15 are selected case 1, if 20, case 2, if 30 is selected case 3 then the rest is case 4

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

What about something like this? Am I Close?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Price</title>
<SCRIPT LANGUAGE="JavaScript">
function  doMath() {
var one = eval(document.theForm.elements[0].value);
var two = eval(document.theForm.elements[1].value);
var outp = "";
var outps = "";
	{
    ans = one*two;
    ansq = (one*two)*12;
    outp = " " + "$" + ans.toFixed(2) + "/Month";
    outps = " " + "$" + ansq.toFixed(2) + "/Year";

}
  document.getElementById('outtab').innerHTML = outp;
document.getElementById('outtab1').innerHTML = outps;
} 
</SCRIPT>
<script type="text/javascript">

function switchme(SNewSel) {

var sNewSel = document.getElementById("selection");
switch (sNewSel)
{
case "1": 
document.getElementById("price") = "2.00";
break;

case "2": 
document.getElementById("price") = "1.00"
break;

case "3": 
document.getElementById("price") = "0.75"
break;

case "4": 
document.getElementById("price") = "0.50"
break;

default: // unknown value -- do nothing
break;
}
}
</script>
</head>
<body>
<div>
<form name="theForm">
<p>Please select amount of GB:</p>
<select id="selection" name="one" onchange="switchme(this.value)">
  <option value="Choose">Please Choose</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="50">50</option>
  <option value="100">100</option>
</select>

<p>Price</p>
$<input id="price" name="two" DISABLED type="text" size="6" value="2.00">/GB

<BR><BR>Monthly Total:<SPAN ID="outtab"></SPAN>
Yearly Total:<SPAN ID="outtab1"></SPAN>
<BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570

Newbie Poster

23 posts since Nov 2011

Reputation Points: 10

Solved Threads: 0

4 Months Ago

Pat,

Your code will simplify considerably by using the option values to store the unit prices.

function switchme(sel) {
  var value = sel[sel.selectedIndex].value;
  document.getElementById("price").innerHTML = value.toFixed(2);
}

<select id="selection" name="one" onchange="switchme(this)">
  <option value="Choose">Please Choose</option>
  <option value="2">5</option>
  <option value="1">10</option>
  <option value="0.75">15</option>
  <option value="0.5">20</option>
  <option value="0.45">30</option>
  <option value="0.4">50</option>
  <option value="0.34">100</option>
</select>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,682 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

This question has already been solved

You