pls help me :( Iâ€™m trying to make dynamic calculator to my product.

Question

momonq1990 0 Newbie Poster

13 Years Ago

my calculator work perfect in IE but not in mozilla? what i need to do..

i think its all about to my function i need help to onClick event. pls.

here's code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/calculatorCss.css" rel="stylesheet" type="text/css" />
<title>tile calculator</title>
<script type="text/javascript">
<!--variable declaration only-->
    tWidth = 0;
    tLength = 0;
    tUnit1 = 0;
    tUnit2 = 0;
    tSize = 0;

<!--validation for width can accept numbers and point only-->
    function testWidth()
        {
         var reg=/^((\d+(\.\d*)?)|((\d*\.)?\d+))$/;
         var valWidth = form1.width.value;
         if(reg.test(valWidth))
            {
             form1.width.style.backgroundColor = "white";
             tWidth = parseFloat(form1.width.value);
            }
         else
            {
             form1.width.style.backgroundColor = "red";
             }
             return false;
            }
<!--validation for length can accecpt numbers and point only-->
    function testLength()
    {
     var reg=/^((\d+(\.\d*)?)|((\d*\.)?\d+))$/;
     var valLength = document.getElementById("length").value;
     if(reg.test(valLength))
        {
         form1.length.style.backgroundColor = "white";
         tLength = parseFloat(form1.length.value);
        }
     else
        {
         form1.length.style.backgroundColor = "red";
         }
         return false;
    }

<!--setting for value of tUnit1 and tUnit2-->
function SelectedValue()
{
    var index = document.getElementById("select").selectedIndex;
    if(index == 0)
    {
        form1.select.style.backgroundColor = "red";
    }
    else if (index == 1)
    {
        tUnit1=10;
        tUnit2=10;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 2)
    {
        tUnit1=10;
        tUnit2=29;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 3)
    {
        tUnit1=10;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 4)
    {
        tUnit1=10;
        tUnit2=33;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 5)
    {
        tUnit1=13;
        tUnit2=50;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 6)
    {
        tUnit1=15;
        tUnit2=15;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 7)
    {
        tUnit1=15;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 8)
    {
        tUnit1=20;
        tUnit2=20;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 9)
    {
        tUnit1=20;
        tUnit2=25;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 10)
    {
        tUnit1=20;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 11)
    {
        tUnit1=25;
        tUnit2=33;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 12)
    {
        tUnit1=30;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 13)
    {
        tUnit1=30;
        tUnit2=45;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 14)
    {
        tUnit1=30;
        tUnit2=60;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 15)
    {
        tUnit1=40;
        tUnit2=40;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 16)
    {
        tUnit1=50;
        tUnit2=12;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 17)
    {
        tUnit1=50;
        tUnit2=50;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 18)
    {
        tUnit1=58;
        tUnit2=20;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 19)
    {
        tUnit1=5;
        tUnit2=20;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 20)
    {
        tUnit1=5;
        tUnit2=29;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 21)
    {
        tUnit1=5;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 22)
    {
        tUnit1=60;
        tUnit2=60;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 23)
    {
        tUnit1=60;
        tUnit2=90;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 24)
    {
        tUnit1=6;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 25)
    {
        tUnit1=7;
        tUnit2=20;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 26)
    {
        tUnit1=7;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 27)
    {
        tUnit1=80;
        tUnit2=80;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 28)
    {
        tUnit1=8;
        tUnit2=29;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 29)
    {
        tUnit1=8;
        tUnit2=30;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 30)
    {
        tUnit1=8;
        tUnit2=33;
        form1.select.style.backgroundColor = "white";
        return false;
    }
    else if (index == 31)
    {
        tUnit1=60;
        tUnit2=120;
        form1.select.style.backgroundColor = "white";
        return false;
    }
}

<!--computation process-->
function compute(form)
{   

        if((form1.width.value !="" ) || (form1.length.value != "") || (document.getElementById("nameofselectiongroup").value!=0))
        {   
            if(form1.cm.cm_0.checked)
            {
                tSize=100;
            }
            else if(form1.cm.cm_1.checked)
            {
                tSize=2.45;
            }
            else if(form1.cm.cm_2.checked)
            {
                tSize=30.48;
            }
            else
            {
                tSize=0;    
                alert('no unit');
            }

            a = (tSize*tWidth)/tUnit1;
            b = (tSize*tLength)/tUnit2;
            ans = a*b;
            elem = document.getElementById("ans");
            elem.value = ans;

        }
        else
        {
            alert('input width or length or tile size');
        }
}

<!--Reset only-->
function resetButton()
{
    tWidth = 0;
    tLength = 0;
    tUnit1 = 0;
    tUnit2 = 0;
    tSize = 0;
}
//if (form.cm.cm_0.checked)((10000/((width/tileWidth)*(length/tileLength)))
//else if (form.cm.cm_1.checked)(1550.0031/((width/tileWidth)*(length/tileLength)))
//else if (form.cm.cm_2.checked)(10.7639104/((width/tileWidth)*(length/tileLength)))
//else{
//  alert("please select unit");

   //}
<!--for display only-->
//{
//var selectValue = document.getElementById("select").value;
//a = selectValue;
//elem = document.getElementById("a");
//elem.value = a;
</script>
</head>

<body>

<div id="calBackground">
<div id="formHolder">
    <form id="form1" name="form1" method="post" action="">
      <table width="216" height="199" border="0">
            <tr>
             <td width="210" height="24"><input name="width" type="text" id="width" onblur="testWidth(width);" size="15"/></td>
        </tr>
           <tr>
             <td height="24"><input name="length" type="text" id="length" onblur="testLength();" size="15"/></td>
           </tr>
           <tr>
             <td height="32"><label>
               <input type="radio" name="cm" value="radio" id="cm_0"/>
             </label>
               <label>&nbsp;&nbsp;&nbsp;&nbsp;
               <input type="radio" name="cm" value="radio" id="cm_1" />
               </label>
               <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <input type="radio" name="cm" value="radio" id="cm_2" />
             </label></td>
           </tr>
           <tr>
             <td height="48"><select name="select" id="select" onchange="SelectedValue();">
               <option value=" "></option>
               <option value="10x10">10x10</option>
               <option value="10x29">10x29</option>
               <option value="10x30">10x30</option>
               <option value="10x33">10x33</option>
               <option value="13x50">13x50</option>
               <option value="15x15">15x15</option>
               <option value="15x30">15x30</option>
               <option value="20x20">20x20</option>
               <option value="20x25">20x25</option>
               <option value="20x30">20x30</option>
               <option value="25x33">25x33</option>
               <option value="30x30">30x30</option>
               <option value="30x45">30x45</option>
               <option value="30x60">30x60</option>
               <option value="40x40">40x40</option>
               <option value="50x12">50x12</option>
               <option value="50x50">50x50</option>
               <option value="58x20">58x20</option>
               <option value="5x20">5x20</option>
               <option value="5x29">5x29</option>
               <option value="5x30">5x30</option>
               <option value="60x60">60x60</option>
               <option value="60x90">60x90</option>
               <option value="6x30">6x30</option>
               <option value="7x20">7x20</option>
               <option value="7x30">7x30</option>
               <option value="80x80">80x80</option>
               <option value="8x29">8x29</option>
               <option value="8x30">8x30</option>
               <option value="8x33">8x33</option>
               <option value="60x120">60x120</option>
             </select></td>
        </tr>
           <tr>
             <td>
               <input type="button" name="button" value="Calculate" onclick="compute(this.form)" return="false"/>
             <input type="reset" value="Reset" onclick="resetButton"/></td>
           </tr>
           <tr>
             <td height="31"><input name="ans" type="text" id="ans" size="16" readonly="readonly" /></td>
        </tr>
      </table>
    </form>
</div>
</div>

</body>
</html>

javascript web-browser

Edited 11 Years Ago by TrustyTony because: fixed formatting

3 Contributors
6 Replies
248 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by momonq1990

pritaeas 2,194 ¯\_(ツ)_/¯

13 Years Ago

Do you get a javascript error ?

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Momonq,

I'm not sure why it's not working in ff but the volume of code can be significantly reduced with something like this:

<!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>
<title>tile calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/calculatorCss.css" rel="stylesheet" type="text/css" />

<style>
h3 { margin: 6px 0 0 0; }
#controls input { margin: 12px 0 0 0; }
</style>

 <script type="text/javascript">
 function getDimension(fld)
 {
	var reg=/^((\d+(\.\d*)?)|((\d*\.)?\d+))$/;
	var val = fld.value;
	fld.style.backgroundColor = (reg.test(val)) ? "white" : "red";
	return parseFloat(val);
 }

 function getUnits(menu)
 {
	var val = menu[menu.selectedIndex].value;
	menu.style.backgroundColor = (!val) ? "red" : "white";
	var units = (val) ? val.split('x') : [];
	units[0] = units[0] ? parseInt(units[0], 10) : 1;
	units[1] = units[1] ? parseInt(units[1], 10) : 1;
	return units;
}

function getSize()
{
	var size = (form1.cm.cm_0.checked) ? 100 : (form1.cm.cm_1.checked) ? 2.54 : (form1.cm.cm_2.checked) ? 30.48 : 0;
	document.getElementById("cmCell").style.backgroundColor = (size == 0) ? "red" : "white";
	return size;
}

function compute()
{ 
	var tWidth  = getDimension(document.forms[0].width);
	var tLength = getDimension(document.forms[0].length);
	var tSize = getSize();
	var tUnits = getUnits(document.forms[0].select);
	var a = Math.ceil((tSize * tWidth) / tUnits[0]);
	var b = Math.ceil((tSize * tLength) / tUnits[1]);
	elem = document.getElementById("ans");
	var area = a * b;
	elem.value = isNaN(area) ? 0 : area;
}
onload = function(){
	compute();
};
</script>
</head>

<body>

<div id="calBackground">
	<div id="formHolder">
		<form id="form1" name="form1" method="post" action="">
		<table border="0">
		<tr><td><h3>Area</h3></td></tr>
		<tr>
		<td id="cmCell">
			<input type="radio" name="cm" value="100" id="cm_0" onclick="compute()" checked="checked" /><label for="cm_0">metres</label>
			<input type="radio" name="cm" value="2.45" id="cm_1" onclick="compute()" /><label for="cm_1">inches</label>
			<input type="radio" name="cm" value="30.48" id="cm_2" onclick="compute()" /><label for="cm_2">feet</label>
		</td>
		</tr>
		<tr>
		<td><input name="width" type="text" id="width" onblur="compute();" size="15" value="0" /> width</td>
		</tr>
		<tr>
		<td><input name="length" type="text" id="length" onblur="compute();" size="15" value="0" /> height</td>
		</tr>
		<tr><td><h3>Tile size</h3></td></tr>
		<tr>
		<td xcolspan="2"><select name="select" onchange="compute()">
			<!--option value="">Select</option-->
			<option value="10x10">10x10</option>
			<option value="10x29">10x29</option>
			<option value="10x30">10x30</option>
			<option value="10x33">10x33</option>
			<option value="13x50">13x50</option>
			<option value="15x15">15x15</option>
			<option value="15x30">15x30</option>
			<option value="20x20">20x20</option>
			<option value="20x25">20x25</option>
			<option value="20x30">20x30</option>
			<option value="25x33">25x33</option>
			<option value="30x30">30x30</option>
			<option value="30x45">30x45</option>
			<option value="30x60">30x60</option>
			<option value="40x40">40x40</option>
			<option value="50x12">50x12</option>
			<option value="50x50">50x50</option>
			<option value="58x20">58x20</option>
			<option value="5x20">5x20</option>
			<option value="5x29">5x29</option>
			<option value="5x30">5x30</option>
			<option value="60x60">60x60</option>
			<option value="60x90">60x90</option>
			<option value="6x30">6x30</option>
			<option value="7x20">7x20</option>
			<option value="7x30">7x30</option>
			<option value="80x80">80x80</option>
			<option value="8x29">8x29</option>
			<option value="8x30">8x30</option>
			<option value="8x33">8x33</option>
			<option value="60x120">60x120</option>
		</select> cm</td>
		</tr>
		<tr>
		<td id="controls">
		<input type="button" name="button" value="Calculate" onclick="compute()" return="false" />
		<input type="reset" value="Reset" />
		</td>
		</tr>
		<tr>
		<td><input name="ans" type="text" id="ans" size="16" readonly="readonly" disabled="disabled" value="0" /> tiles</td>
		</tr>
		</table>
		</form>
	</div>
</div>

</body>
</html>

With luck, I may have also fixed the ff isue.

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.

momonq1990 0 Newbie Poster · Answer 1 · 2011-07-12T20:02:42+00:00

no error and it is working in IE and opera also, but when i try to open to FF my calculator cant calculate... :(
do you think sir im wrong in my function???? and how to call value from text field in FF getElementById("txtfldname").value? or form.txtfldname.value?

momonq1990 0 Newbie Poster · Answer 2 · 2011-07-14T07:34:35+00:00

Airshow,

thanks for this mind blowing code hehehe("awesome")... im newbie to this one but still i can read and understand your code great!... great help to me also! (^^, but sir, still cant run the computation in my mozilla :( huhuhu.. your code perfect in IE, and Opera....
thank you again.. i think i need to Compress my code again.
more help to come heheh!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2011-07-14T08:37:53+00:00

Momonq,

The issue in ff may be the way the radio buttons are addressed inthe function getSize.

Try this version:

function getSize()
{
	var size = 0;
	for (i=0; i<document.forms[0].cm.length; i++) {
		if (document.forms[0].cm[i].checked == true) {
			size = document.forms[0].cm[i].value;
		}
	}
	document.getElementById("cmCell").style.backgroundColor = (size == 0) ? "red" : "white";
	return size;
}

You also need to correct the inches conversion factor from 2.45 to 2.54 in the HTML.

Airshow

momonq1990 0 Newbie Poster · Answer 4 · 2011-07-15T07:16:25+00:00

airshow,

thanks again to airshow... this time works perfectly to browsers heheh... thank you sir and two BIG thumbs up for your kindness hehehee.. more power and more code to solve hehehe...