Member Avatar for momonq1990

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>
Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 6 Replies
  • 253 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by momonq1990
Member Avatar for pritaeas

Do you get a javascript error ?

Member Avatar for momonq1990

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?

Member Avatar for Airshow

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

Member Avatar for momonq1990

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!

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for momonq1990

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...

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.