Help with simple math script

@ghost2012Jan 10.2009

Hello

Sorry for asking a noob question but need help with a math script.

I’m trying to get 2 functions, I guess thats what you would call it to work
in one script. I can’t seem to get var100_var107 to show after the process
has been completed. If someone can help on this. I thank them very much.

<!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>Untitled Document</title>
<script language=”javascript” type=”text/javascript”>
function units2cases(form) {
var100=eval(form.var100.value)
var101=eval(form.var101.value)
var102=eval(form.var102.value)
var103=eval(form.var103.value)
var100_var107=var100+var101+var102+var103
units=var100_var107
cases=eval(form.cases.value)
casetotal=units/cases
form.casetotal.value=casetotal
}
</script>

</head>

<body>
<form>
Variety Units
<br />
<input name=”var100″ type=”text” id=”var100″ value=”0″ size=”3″ maxlength=”4″ />
<br />
<input name=”var101″ type=”text” id=”var101″ value=”0″ size=”3″ maxlength=”4″ />
<br />
<input name=”var102″ type=”text” id=”var102″ value=”0″ size=”3″ maxlength=”4″ />
<br />
<input name=”var103″ type=”text” id=”var103″ value=”0″ size=”3″ maxlength=”4″ />

<br />
=

<br />
Variety Units to Whole Cases
<br />
<input name=”casetotal” type=”text” id=”casetotal” onfocus=”units2cases(this.form)” value=”0″ size=”3″ maxlength=”4″ />
</form>
</body>
</html>

to post a comment

JavaScript

7 Comments(s) _↴

@JMRKERJan 10.2009 — #I changes your two hidden elements to text for testing purposes.

The 'var100_var107' was not being displayed because you were not wiriting to it.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;script language="javascript" type="text/javascript"&gt;
 function units2cases(form) {
 var100=eval(form.var100.value)
 var101=eval(form.var101.value)
 var102=eval(form.var102.value)
 var103=eval(form.var103.value)
 var100_var107=var100+var101+var102+var103
 units=var100_var107; 
 form.var100_var107.value = units;
 form.units.value = units;
 cases=eval(form.cases.value)
 casetotal=units/cases
 form.casetotal.value=casetotal
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 Variety Units&lt;br /&gt;
 &lt;input name="var100" type="text" id="var100" value="0" size="3" maxlength="4" /&gt;&lt;br /&gt;
 &lt;input name="var101" type="text" id="var101" value="0" size="3" maxlength="4" /&gt;&lt;br /&gt;
 &lt;input name="var102" type="text" id="var102" value="0" size="3" maxlength="4" /&gt;&lt;br /&gt;
 &lt;input name="var103" type="text" id="var103" value="0" size="3" maxlength="4" /&gt;&lt;br /&gt;
 =&lt;br /&gt;
 &lt;input name="var100_var107" type="text" value="0" size="3" maxlength="4" /&gt;&lt;br /&gt;
 &lt;input type="text" name="units" value="0" id="units" /&gt;&lt;br /&gt;
 &lt;input type="text" name="cases" value="36" id="cases" /&gt;&lt;br /&gt;
 Variety Units to Whole Cases&lt;br /&gt;
 &lt;input name="casetotal" type="text" id="casetotal" onfocus="units2cases(this.form)" value="0" size="3" maxlength="4" /&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

I'm a little confused as to what you are trying to do with the calculation but I think I've kept the logic intact.

You might want to come back here when you get more experience

because I think your next version of the script will be VERY different and will do the same thing.

@ScriptageJan 10.2009 — #Lose the eval() it is superfluous.

@ghost2012authorJan 10.2009 — #i tried writing it in a different function but thats where i get lost at. And unfortunately i'm not very well with word math. So that is why I'm lost. If anyone could at least show me an example to this i can try and figure out the rest.

@ScriptageJan 10.2009 — #

[code=html]
 <!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>Untitled Document</title>
 <script language="javascript" type="text/javascript">
 function units2cases() {
 form = document.forms[0];
 
 var units = (parseInt(form.var100.value) + parseInt(form.var101.value) + parseInt(form.var102.value) + parseInt(form.var103.value));
 form.var100_var107.value = units;
 
 if(parseInt(form.var100_var107.value) > 0){
 form.casetotal.value = units / parseInt(form.cases.value);
 }
 
 }
 </script>
 
 </head>
 
 <body>
 <form>
 Variety Units
 <br />
 <input name="var100" type="text" id="var100" value="0" size="3" maxlength="4" onblur="units2cases()" />
 <br />
 <input name="var101" type="text" id="var101" value="0" size="3" maxlength="4" onblur="units2cases()" />
 <br />
 <input name="var102" type="text" id="var102" value="0" size="3" maxlength="4" onblur="units2cases()" />
 <br />
 <input name="var103" type="text" id="var103" value="0" size="3" maxlength="4" onblur="units2cases()" />
 <br />
 =
 <br />
 <input name="var100_var107" type="text" value="0" size="3" maxlength="4" />
 <br />
 <input type="hidden" name="units" value="0" id="units" />
 
 <input type="hidden" name="cases" value="36" id="cases" />
 
 <br />
 Variety Units to Whole Cases
 <br />
 <input name="casetotal" type="text" id="casetotal" onfocus="units2cases()" value="0" size="3" maxlength="4" />
 </form>
 </body>
 </html> 
 [/code]

@NedalsJan 10.2009 — #A few extra notes...

-Do not use 'form' as a variable name. It can sometimes get your in trouble. I like to use 'df'

function units2cases(df) { //df = document.form -or- this.form

-use meaningful variable names

df.unittotal.value = total;

-values from <inputs> are returned as STRINGS and must be converted to numbers

var var100 = Number(df.var100.value);

-You seldom, if ever, need to use 'eval' (as noted by Scriptage)

With those corrections your script should work.

@TheTeenScripterJan 10.2009 — #I've only had to use eval() once, where I had a script do calculation, based on flexible user input. for example, user types in "14/2+(12*2/6)".

@ScriptageJan 10.2009 — #A better implementation would validate the input and round up the amount of cases, as follows:

[code=html]
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Case Calculator</title>
 <style type="text/css">
 div.row{
 
 clear:both;
 
 }
 
 div.row span.l_cell, div.row span.heading{
 
 flaot:left;
 width:70px;
 
 }
 
 div.row span.heading{
 
 font-weight:bold;
 
 }
 </style>
 <script type="text/javascript">
 function calculate(){
 
 var df = document.forms["calculator"];
 var total = 0;
 var s_case = 36;
 
 for(var i=0; i<df.elements.length; i++){
 
   if(df.elements[i].name.indexOf("type") > -1){
 
   if(df.elements[i].value.match(/^[0-9]*$/)){
 
   total += Number(df.elements[i].value);
 
   }else{
 
   alert("Invalid character");
   df.elements[i].value = "";
   return false;
 
   }
 
   } 
 
 }
 
 
 df["total"].value = total;
 df["cases"].value = Math.ceil((total / s_case));
 
 }
 onload = function(){
 
 var df = document.forms["calculator"];
 
 for(var i=0; i<df.elements.length; i++){
 
   df.elements[i].onblur = calculate;
 
 }
 }
 </script>
 </head>
 <body>
 
 <div id="container">
 <form name="calculator">
 <div class="row">
 <span class="heading">Type</span>
 <span class="heading">Quantity</span>
 </div>
 <div class="row">
 <span class="l_cell">Type 1:</span>
 <span class="l_cell"><input type="text" name="type1" id="type1" size="3" maxlength="4" /></span>
 </div>
 <div class="row">
 <span class="l_cell">Type 2:</span>
 <span class="l_cell"><input type="text" name="type2" id="type2" size="3" maxlength="4" /></span>
 </div>
 <div class="row">
 <span class="l_cell">Type 3:</span>
 <span class="l_cell"><input type="text" name="type3" id="type3" size="3" maxlength="4" /></span>
 </div>
 <div class="row">
 <span class="l_cell">Type 4:</span>
 <span class="l_cell"><input type="text" name="type4" id="type4" size="3" maxlength="4" /></span>
 </div>
 <div class="row">
 <span class="l_cell">Total:</span>
 <span class="l_cell"><input type="text" name="total" id="total" size="3" maxlength="4" /></span>
 </div>
 <div class="row">
 <span class="l_cell">Cases:</span>
 <span class="l_cell"><input type="text" name="cases" id="cases" size="3" maxlength="4" /></span>
 </div>
 </form>
 </div>
 
 </body>
 </html>
 
 [/code]

Also in #JavaScript _↴

Help me pls...Adding multiple styles with SavaScript Need to change tr background color by row index

Success!

Help @ghost2012 spread the word by sharing this article on Twitter...

Tweet This

Help with simple math script

<br />
=

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with simple math script

<br /> =

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

<br />
=

7 Comments(s) _↴

Also in #JavaScript _↴