Simple JS Math

Question

patk570 42 Newbie Poster

12 Years Ago

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>
<br>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

javascript mathematics

2 Contributors
8 Replies
214 Views
10 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

12 Years 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

Edited 12 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

12 Years 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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

patk570 42 Newbie Poster · Answer 1 · 2012-01-13T06:57:08+00:00

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><BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570 42 Newbie Poster · Answer 2 · 2012-01-13T07:02:38+00:00

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><BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>

patk570 42 Newbie Poster · Answer 3 · 2012-01-13T08:00:33+00:00

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

patk570 42 Newbie Poster · Answer 4 · 2012-01-13T08:12:15+00:00

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 42 Newbie Poster · Answer 5 · 2012-01-13T08:16:29+00:00

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 42 Newbie Poster · Answer 6 · 2012-01-13T08:41:58+00:00

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>
<br>Yearly Total:<SPAN ID="outtab1"></SPAN>
<br><BR>
<input type="button" onclick="doMath()" value="Calculate Total" >
</form>
</div>
</body>
</html>