|
JavaScript - Javascript Calculator Clears Results When Using Custom Button
Hi All,
Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this: When I use the input type = button or submit, then the calculator works fine BUT I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads I have made the button line in bold. All help appreciated!! Many thanks Here is my code: <html> <head> <script language="JavaScript"> function Framesize(BikeSizer) { var a = parseFloat(BikeSizer.Insleg.value); b = (a * 0.572); c = Math.round(b); BikeSizer.FramesizeCM.value = c; d = (a * 0.226); e = Math.round(d); BikeSizer.FramesizeInch.value = e; } </script> </head> <body> <Form name="BikeSizer"> <!--The visuals for the graphic--> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td> </tr> </table> <table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;"> <tr> <td colspan="2" valign="middle" align="left"> <div style="padding:2px 5px 5px 12px;"> <font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font> <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div> </td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td> <td><select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select></td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td> <td><input name="Insleg"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td> </td> <td><div style="padding:6px 0 8px 0;"> <input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)> </div></td> </tr> <tr> <td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td> <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> <strong>CM</strong> <br /><br /><input name = "FramesizeInch"> <strong>Zoll</strong> </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td> </tr> </table> </FORM> Similar Tutorialshey there, I have a problem when trying to set a different color for each button on my 4 blocks, matching the proper color. Here is my page http://holidays.area-italia.com I ve copy/paste the default art-button in the template.css file adding a " -red" suffix. I also made a new image with the red colors to match the active/hovered/pressed. Here is the code: Code: /* begin Button-red */
.art-button-wrapper-red a.art-button-red,
.art-button-wrapper-red a.art-button-red:link,
.art-button-wrapper-red input.art-button-red,
.art-button-wrapper-red button.art-button-red
{
text-decoration: none;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
position:relative;
top:0;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #FFFFFF !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 37px;
height: 37px;
margin: 0 !important;
padding: 0 26px !important;
overflow: visible;
cursor: pointer;
}
.art-button-red img, .art-button-wrapper-red img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper-red
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 37px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2-red .art-button-wrapper-red
{
display: block;
float: left;
}
input, select, textarea
{
vertical-align: middle;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
}
.art-block-red select
{
width:96%;
}
.art-button-wrapper-red.hover .art-button-red, .art-button-wrapper-red.hover a.art-button-red:link, .art-button-red:hover
{
color: #FFFFFF !important;
text-decoration: none !important;
}
.art-button-wrapper-red.active .art-button-red, .art-button-wrapper-red.active a.art-button-red:link
{
color: #FCFCFD !important;
}
.art-button-wrapper-red .art-button-l-red, .art-button-wrapper-red .art-button-r-red
{
display: block;
position: absolute;
height: 121px;
margin: 0;
padding: 0;
background-image: url('images/buttonr.png'); (I made a new image with the red colors)
}
.art-button-wrapper-red .art-button-l-red
{
left: 0;
right: 14px;
}
.art-button-wrapper-red .art-button-r-red
{
width: 417px;
right: 0;
clip: rect(auto, auto, auto, 403px);
}
.art-button-wrapper-red.hover .art-button-l-red, .art-button-wrapper-red.hover .art-button-r-red
{
top: -42px;
}
.art-button-wrapper-red.active .art-button-l-red, .art-button-wrapper-red.active .art-button-r-red
{
top: -84px;
}
.art-button-wrapper-red input
{
float: none !important;
}
/* end Button-red */
Then I copy/paste the default code button in the index.php adding the "-red" suffix, into my red block: Code: <center>
<span class="art-button-wrapper-red">
<span class="art-button-l-red"> </span>
<span class="art-button-r-red"> </span>
<a class="readon art-button-red" href="javascript:void(0)">More</a>
</span>
</center>
Doing all the mentioned above doesnt work, it always shows the default button. I know there is a javascript which rules it but i dont know how to edit/add the function. Here is my part of the script.js related to the button: Code: /* begin Button */
function artButtonSetup(className) {
jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function(i, val) {
var b = jQuery(val);
if (!b.parent().hasClass('art-button-wrapper')) {
if (!b.hasClass('art-button')) b.addClass('art-button');
jQuery("<span class='art-button-wrapper'><span class='art-button-l'> </span><span class='art-button-r'> </span></span>").insertBefore(b).append(b);
if (b.hasClass('active')) b.parent().addClass('active');
}
b.mouseover(function() { jQuery(this).parent().addClass("hover"); });
b.mouseout(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
b.mousedown(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
b.mouseup(function() { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
});
}
jQuery(function() { artButtonSetup("art-button"); });
/* end Button */
Anyone who can help out please? Many thanks. Hello, I need your help. I basically need, when the enter button is pressed on the keyboard to trigger a button. Currently, my code works but it just refreshes the page and does not actually trigger the desired button: Code: //HERES MY CUSTOM BUTTON: <BUTTON TYPE="submit" onMouseOver="goLite(this.name)" onMouseOut="goDim(this.name)" onclick="javascript:v7_search()" CLASS="btn_std" NAME="btn_search" > ? Search </BUTTON> Here's the code to make the enter button work: Code: <form name="frmIMTS"
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btn_search').click();}};"
>
Any help with this is greatly appreciated. Cheers, J I need help trying to figure out how to get my bmi calculator to work. I cant figure out what is wrong with my formula part and why it wont calculate the numbers you type in...pls help! <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function calculateBMI() { var weight = numb(document.data.weight.value) var height = numb(document.data.height.value) var height2 = height2 * height2 var BMI = weight * 703 / (height2 * height2) document.form.BodyMassIndex.value=custRound(BMI,1); } </script> <title></title> <style type="text/css"> div.c2 {text-align: center} input.c1 {font-size: 8pt} </style> </head> <body> <div class="c2"> <form name="form" id="form"><input type="text" name="weight" size="4"> Weight (in Kilos) <input type="text" name="height" size="4"> Height (in Centimeters)<br> <br> <input type="text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI <input type="button" class="c1" value="Calculate" onclick="calculateBMI()" name="button"> <input type="reset" class="c1" value="Clear Form"></form> </div> </body> </html> Hi all master and expert coders I am working on a calculator which using the instructor's codes from the school. The problem that I having right now is the operator. I have successfully complete only the addition, but could not manage on subtraction and the rest operator. I hope experienced codes would help me out on this. Below is my codes. <!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> <script type="text/javascript"> function calculate() { var value1 = parseInt(validate(document.getElementById("value1").value)); var value2 = parseInt(validate(document.getElementById("value2").value)); radioButtonCheck(); checkboxCheck(); dropDownListCheck(); document.getElementById("result").value = addition(value1, value2); document.getElementById("result").value = subtraction(value1, value2); document.getElementById("result").value = multiplication(value1, value2); document.getElementById("result").value = division(value1, value2); } function validate(value) { if (value == null || value == "") { alert("Required Field"); return 0; } else if (isNaN(value)) { alert("Must be a number"); return 0; } else return value; } function addition(value1, value2){ return value1 + value2; } // trying to use the same addition return statement but fail. function radioButtonCheck() { if ((document.getElementById("radio1").checked == false) && (document.getElemtById("radio2").checked == false)) { alert("Please select a radio button"); valid = false; } } function checkboxCheck() { if ((document.getElementById("cbox1").checked == false) && (document.getElementById("cbox2").checked == false)) { alert("Please select a checkbox"); valid = false; } } function dropDownListCheck() { if ((document.getElementById("ddlOperator").selectedIndex == 0)) { alert("Please select a operator"); valid = false; } } </script> <title>Calculator By Alsus</title> </head> <body> <h2>Calculator</h2> <table border = "1"> <tr> <td>Value 1:</td> <td><input type="text" id="value1" name="value1" /></td> </tr> <tr> <td>Value 2:</td> <td><input type="text" id="value2" name="value2" /></td> </tr> <tr> <td>Operator:</td> <td><input type="text" id="Operator" name="Operator" /></td> </tr> <tr> <td><input type="radio" id="radio1" name="radio1" value="radio1" />Radio1<br /></td> <td><input type="radio" id="radio2" name="radio2" value="radio2" />Radio2<br /></td> </tr> <tr> <td><input type="checkbox" id="cbox1" name="cbox1" value="cbox1" />Checkbox 1<br /></td> <td><input type="checkbox" id="cbox2" name="cbox2" value="cbox2" />Checkbox 2<br /></td> </tr> <tr> <td> <select id="ddlSelect"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </td> <td> </td> </tr> <tr> <td>Result:</td> <td><input type="text" id="result" name="result" /></td> </tr> </table> <input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" /> <input type="reset" id="btn_res" name="btn_res" value="Reset" /> </body> </html> I'm not sure what the code is to add this to javascript. I don't know if anyone can help me with this? Each numeric button should change the input box up at the top to whatever. When one of the operator buttons (+,-,*,/) is pressed, the value in the input box at the top should change to 0. Before an operator button is pressed, the value should be stored in a variable to keep track of the left-hand side of the equation. After it is pressed, the value should be stored in the right hand side variable. Thanks aaaaaa
This is what I have so far, but now I am stuck. My instructor wants the output value (Number Set C) to include Number Set A and Number Set B. For instance, if Number Set A is "10" and you want to add Number Set B whose value is also "10", my instructor wants Number Set C to say "10 + 10 = 20". Where am I going wrong, and what is the easiest way I can make this work while making as little changes as possible? Most of the code is what my instructor requires us to use. Code: <HTML>
<HEAD>
<TITLE>COMSC-100-1241 - Assignment #8 - Introducing "if" Logic - Programming Your Own Calculator</TITLE>
<SCRIPT LANGUAGE="text/JavaScript">
function Go(code){
var a
var b
var c
var x
a = parseFloat(document.getElementById("a").value);
b = parseFloat(document.getElementById("b").value);
if (code == 0){
x = a + b
c = a + " + " + b + " = " + x
}
if (code == 1){
x = a - b
c = a + " - " + b + " = " + x
}
if (code == 2){
x = a * b
c = a + " * " + b + " = " + x
}
if (code == 3){
x = a / b
c = a + " / " + b + " = " + x
}
document.getElementById("c").value = c;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="500" ALIGN="center">
<TR>
<TD>
<DIV ALIGN="left">
<FORM NAME="calculator">
<B>Instructions: </B> Type a number in the box for "Number Set #1". Then input a <I>second</I> number in the box for "Number Set #2". Click the "Calculate" button, and the sum of those two numbers will appear in the box for "Number Set #3".
<BR>
<BR>
<B>Input Values: </B>
<BR>
<B>Number Set A:</B> <INPUT ID="a">
<BR><BR>
<B>Number Set B:</B> <INPUT ID="b" >
<BR><BR>
<INPUT TYPE="Submit" VALUE="Add" OnClick="Go(0);">
<INPUT TYPE="Submit" VALUE="Subtract" OnClick="Go(1);">
<INPUT TYPE="Submit" VALUE="Multiply" OnClick="Go(2);">
<INPUT TYPE="Submit" VALUE="Divide" OnClick="Go(3);">
<BR><BR>
<B>Output Value: </B>
<BR>
<B>Number Set C:</B> <INPUT ID="c" SIZE="50">
</FORM>
</DIV>
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
hey guys, I have to create a scientific calculator using javascript and I am wondering how I can make it so that the equals box (box that displays the answer) cannot be manually cleared with the mouse cursor. thanks! Scott I need help putting parentheses in my calculator. Could anyone provide me some source code for parentheses in a calculator? If not source code, could you offer me recommendations as to how to solve my problem? Thanks! Hello everyone, wondering if I could get some help. I have not done anything with html and javascript until this afternoon and funnily enough I'm struggling a tad I am creating a free website about the dangers of chocolate for dogs. Basically I need a calculator to calculate the toxic amount for the user input of their dogs weight in kgs. I figured doing one for each type of chocolate would be easier than doing something where a box was ticked for each type of chocolate so have been trying to do one for milk chocolate first. This is my feeble attempt, it looks good but doesnt work, my javascript is clearly majorly wrong somewhere! <html> <head> <script language="JavaScript"> function calc(form) { var f = parseFloat(form.kg.value); var T = 0; T = (f/0.45)*28.35; form.answer.value = T; } // done hiding from old browsers --> </script> </head> <body> <FORM> <h2>Toxic dose of milk chocolate</h2> Enter dogs weight in kg: <INPUT NAME="kg" VALUE="0" MAXLENGTH="100" SIZE=25> <p> Click to calculate toxic dose in grammes: <INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=kg(this.form)> <p> Toxic amount of milk chocolate is: <INPUT NAME="g" READONLY SIZE=25> </FORM> </body> </html> Can anybody help? Thanks in advance. I am no JavaScript guru but I am trying to make a form that will calculate a discount if the quantity is greater than 4. I need it to also calculate a total with discounts at the very end. I have the discount working but I need it to work over multiple fields. Any help would be greatly appreciated. I have been pulling my hair out over this one for 3 days. Thanks in advance. Here is the code. Code: <html>
<header>
<SCRIPT type = "text/JavaScript">
function calcPrice(){
var discount, price, total, savings;
var v = parseInt(document.getElementById("value").value);
var q = parseInt(document.getElementById("quantity").value);
if (q <= 3) discount = 0;
else if (q>=4) {discount = .25}
price = q * v;
savings = q * v * discount;
total = q * v - savings;
alert(total);
}
</SCRIPT>
Number of Bedrooms
<input type="text" id="quantity" />
<input type="hidden" id="value" value="10" />
<input type="button" onclick="calcPrice()">
</header>
<body>
</body>
</html>
Hi there, me again, lol. I'm now working on a simple JavaScript calculator script, and here's what I have so far. Code: <!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> </head> <body> <form name="Calculator"> <input type="text" name="Output" size="22"> <br/> <br/> <input name="1" type="button" value=" 1 " onClick="document.Calculator.Output.value += '1'" /> <input name="1" type="button" value=" 2 " onClick="document.Calculator.Output.value += '2'" /> <input name="1" type="button" value=" 3 " onClick="document.Calculator.Output.value += '3'" /> <input name="1" type="button" value=" 4 " onClick="document.Calculator.Output.value += '4'" /> <br/> <input name="1" type="button" value=" 5 " onClick="document.Calculator.Output.value += '5'" /> <input name="1" type="button" value=" 6 " onClick="document.Calculator.Output.value += '6'" /> <input name="1" type="button" value=" 7 " onClick="document.Calculator.Output.value += '7'" /> <input name="1" type="button" value=" 8 " onClick="document.Calculator.Output.value += '8'" /> <br/> <input name="1" type="button" value=" 9 " onClick="document.Calculator.Output.value += '9'" /> <input name="1" type="button" value=" 0 " onClick="document.Calculator.Output.value += '0'" /> <input name="1" type="button" value=" + " onClick="document.Calculator.Output.value += ' + '" /> <input name="1" type="button" value=" - " onClick="document.Calculator.Output.value += ' - '" /> <br/> <input name="1" type="button" value=" C " onClick="document.Calculator.Output.value = ''" /> <input name="1" type="button" value=" / " onClick="document.Calculator.Output.value += ' / '" /> <input name="1" type="button" value=" * " onClick="document.Calculator.Output.value += ' * '" /> <input name="1" type="button" value=" = " onClick="document.Calculator.Output.value += ' = ' + eval(Calculator.Output.value)" /> </form> </body> </html> The calculator itself is fully working functionally, feel free to test to your heart's content. :P The problem I'm having is not really a problem per se, more of a behaviour I don't want in the script. After clicking the = button and getting the results of the calculation displayed, clicking another number will just concatenate (I believe that's the right term) that to the result of the sum, and I don't want this to happen. If I've just done a calculation, I want the results of it to be cleared as soon as I hit another button. My guesses are that I would need to do this via some function activated by the = button. Is there some sort of way I can have the output of a sum cleared after a calculation has been done, so that the next calculation becomes a seperate one? If you're still not getting what I'm saying entirely, just let me know, I will try to provide screenshots. Thanks. I've seen several Java or Perl Derivative Calculators online, but I can't seem to find any in JavaScript. Has anyone tried? I might need one in JavaScript (or Flash ActionScript) for a graphing tool I'm working on, and I don't want to reinvent the wheel if I can avoid it.
I'm new to javascript but not to programming. Here is my code: PHP Code: PHP Code: print "<form name='goldcalculator'>"; print "<input type='hidden' name='goldspot' value='$goldvalue'>"; print "<select name='gunit' onchange='updateTotal();'>"; print "<option value='20'>Pennyweight (DWT)</option>"; print "<option value='31.1'>Grams (g)</option>"; print "</select><br>"; print "10K <input type='text' name='10k' onchange='updateTotal();'><br>"; print "14K <input type='text' name='14k' onchange='updateTotal();'><br>"; print "18K <input type='text' name='18k' onchange='updateTotal();'><br>"; print "22K <input type='text' name='22k' onchange='updateTotal();'><br>"; print "24K <input type='text' name='24k' onchange='updateTotal();'><br>"; print "TOTAL <input type='text' name='totalprice'>"; print "</form>"; Code: <script language="JavaScript">
function updateTotal()
{
var u = document.goldcalculator.gunit.value;
var spotprice = document.goldcalculator.goldspot.value / u;
var gold10 = document.goldcalculator.10k.value;
var gold14 = document.goldcalculator.14k.value;
var gold18 = document.goldcalculator.18k.value;
var gold22 = document.goldcalculator.22k.value;
var gold24 = document.goldcalculator.24k.value;
var calculatedPrice = document.goldcalculator.totalprice.value;
calculatedPrice = ((spotprice*.999*gold24)+(spotprice*.916*gold22)+(spotprice*.75*gold18)+(spotprice*.585*gold14)+(spotprice*.417*gold10));
}
</script>
I don't know where to begin to debug this. It's very simple. The $goldvalue variable is non-editable and is pulled off my MySQL database and that works. They fill in the inputs via the PHP form and then it basically adds them up and spits out the total. Can someone tell me what's wrong? Hi! I have this java script function to set up a GPA calculator. There's something wrong, but I can't figure out what, any answers? Thanks! var GPA=new Array("F","F","F","F","F"); var GPA=new Array("D","D","D","D","D"); var GPA=new Array("C","C","C","C","C"); var GPA=new Array("C+","C+","C+","C+","C+"); var GPA=new Array("B","B","B","B","B"); var GPA=new Array("B+","B+","B+","B+","B+"); var GPA=new Array("A","A","A","A","A"); var credits=new Array(0,0,0,0,0); var credits=new Array(1,1,1,1,1); var credits=new Array(2,2,2,2,2); var credits=new Array(3,3,3,3,3); var credits=new Array(4,4,4,4,4); var GPA_point=new Array(0,0,0,0,0); var GPA_point=new Array(5,5,5,5,5); function get GPA point(gpa){ if(gpa=="A"||gpa=="a") return 4; else if(gpa=="B+"||gpa=="b+") return 3.5; else if(gpa=="B"||gpa=="b") return 3; else if(gpa=="C+"||gpa=="c+") return 2.5; else if(gpa=="C"||gpa=="c") return 2; else if(gpa=="D"||gpa=="d") return 1; else if(gpa=="F"||gpa=="f") return 0; } function calculate_gpa(){ var totalGPA=0; var total_credits =0; for(var i=0;i<5;i++){ GPA_point[i]=get_GPA_point(GPA[i]); totalGPA = totalGPA + GPA_point[i]*credits[i]; total_credits = total_credits + credits[i]; } if(total_credits==0) document.getElementById("gpa_result").value = 0; else document.getElementById("gpa_result").value = (totalGPA/total_credits).toFixed(1); } I'm just learning javascript and am editing a calculator form that will calculate square footage and write to a form text field. I have another form filed that I would like to display a number based a series of if else statements. ex: if square footage > 2761 then display 5.0., if square footage > 2521 then display 4.5. etc. Any help would be appreciated. I have posted my the code below. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<HTML>
<HEAD>
<TITLE>Size Calculator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Footage.value = A * B;
form.Size.value = 21;
}
/* ClearForm: this function has 1 argument: form.
It clears the input and answer fields on the form.
It needs to know the names of the INPUT elements in order
to do this. */
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Footage.value = "";
form.Size.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
</HEAD>
<BODY>
<P><FONT SIZE="+2">Sizing Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>House width (ft): <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>House length (ft): <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate" name="Calculate" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Square footage = <INPUT TYPE=TEXT NAME="Footage" SIZE=12></P>
<P>Size = <INPUT TYPE=TEXT NAME="Size" SIZE=12></P>
</FORM>
</BODY>
</HTML>
Hi, I am new to Javascript and I am having a problem with this calculator I am building. The purpose is to see if you will be able to go to prom. In a form you input 4 pieces of info. (1)How much money the ticket costs. (2)How much money your tuxedo costs. (3)How much money the dinner costs. (4)How much money you have. I have the calculator set up, and it is supposed to add together the ticket cost, tuxedo cost, and dinner cost, and subtract it from how much money you have. I finished the code, and I am getting no error at the bottom of the screen, but the calculator doesn't work. So, I guess it is a logic error. Here is the code and a link to the page: http://themusiccove.com/Documents/prom2010.htm <html> <head> <title>Prom 2010</title> <script LANGUAGE="JAVASCRIPT"> function prom(myform) { var ticket=document.Calculator.ticket.value var ticket=parseInt(ticket,10) if (isNaN(ticket)) { alert("Enter a number for the Ticket Cost.") document.Calculator.ticket.value="" document.Calculator.ticket.focus() } else { var tuxedo=document.Calculator.tuxedo.value var tuxedo=parseInt(tuxedo,10) if (isNaN(tuxedo)) { alert("Enter a number for the Tuxedo Cost.") document.Calculator.tuxedo.value="" document.Calculator.tuxedo.focus() } else { var dinner=document.Calculator.dinner.value var dinner=parseInt(dinner,10) if (isNaN(dinner)) { alert("Enter a number for the Dinner Cost.") document.Calculator.dinner.value="" document.Calculator.dinner.focus() } else { var money=document.Calculator.money.value var money=parseInt(money,10) if (isNaN(money)) { alert("Enter a number for how much money you have.") document.Calculator.money.value="" document.Calculator.money.focus() Calculate=money-(ticket+tuxedo+dinner) document.Calculator.answer.value=Calculate } } } } } </script> </head> <body bgcolor="ccffcc"> <img src="http://www.shop-direct.net/images/prom5.jpg" align="left" width="125" length="100"> <img src="http://www.packerpress.com/wp-content/uploads/2009/05/5301-men-tuxedo-jacket-b.jpg" align="right" width="125" length="100"> <h2><center>Prom Calculator</center><h2> <h4><center>Enter the data in the textboxes to see if you have enough money to go to prom.</center></h4> <Center><FORM Name="Calculator"> <table border="0"> <tr> <td><p align=right>Ticket Cost: </td> <td><Input Type="text" Name="ticket" value=" "></td> </tr> <tr> <td><p align=right>Tuxedo Cost: </td> <td><Input Type="text" Name="tuxedo" value=" "></td> </tr> <tr> <td><p align=right>Dinner Cost: </td> <td><Input Type="text" Name="dinner" value=" "></td> </tr> <tr> <td><p align=right>Your Money: </td> <td><Input Type="text" Name="money" value=" "></td> </tr> <tr> <td><p align=right>Profit/Loss: </td> <td><Input Type="text" Name="answer" value=" "></td> </tr> <tr align="center"> <td colspan=2><Input Type="Button" Value="Calculate" Onclick="prom(Calculator)"></tr> <tr align="center"><td colspan=2><Input Type="Reset"></td></tr> </table></center> <SCRIPT LANGUAGE="JAVASCRIPT"> <!--Hide from old browsers //--> </SCRIPT> <CENTER><HR Width="75%"></CENTER> <SCRIPT LANGUAGE="JAVASCRIPT"> <!--Hide from old browsers var tNow = new Date() var tlocDate = tNow.toLocaleString() var tDate = tlocDate.substring(0,23) document.write("<H2><CENTER>Welcome, today is "+tDate+"</CENTER></H2>") //--> </SCRIPT> <SCRIPT LANGUAGE="JAVASCRIPT"> <!--Hide from old browsers document.write("<H4><CENTER>This document was last modified "+document.lastModified+"</CENTER></H4>") //--> </SCRIPT> </body> </html> I am trying to build a direct mail calculator and am taking it one step at a time. I am stuck because I need to calculate postage based on quantity entered and what size mailer they have chosen. Any help is greatly appreciate as I am a novice! So far I have (PLEASE NOTE the array of printing_cost_formulas are just random numbers I put to check it worked): Code: <script type="text/javascript">
var printing_cost_formulas = new Array();
printing_cost_formulas["4x6"]=10+5;
printing_cost_formulas["5.5x8.5"]=25;
printing_cost_formulas["6x9"]=35;
function getPrintingCost()
{
var PrintingCost=0;
var theForm = document.forms["cakeform"];
var mailertype = theForm.elements["mailertype"];
for(var i = 0; i < mailertype.length; i++)
{
if(mailertype[i].checked)
{
PrintingCost = printing_cost_formulas[mailertype[i].value];
break;
}
}
return PrintingCost;
}
function calculateTotal()
{
var PrintingCost = getPrintingCost();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Printing Cost $"+PrintingCost + mailer_quantity;
}
</script>
So, as an example I need help starting down a path of defining when the user wants 1,000 of 4x6 the price is 0.50 per piece. When they want 1,000 6x9 the price is 0.55 and so on. All the postage variables are known I just have no idea how to write the 'if, else' statement or define the quantity variable within this context!! AH! When you load www.reddit.com the searchbox contains the words "search reddit". Once it receives the focus by tabbing or clicking, the contents are cleared. However, there is no onfocus event, onclick event or any other script within the tag for this textbox. How is a textbox cleared without explicitly using an event?
|
|||||||