Displaying javascript calculation based on select menu option -

-

this 1 ought slam dunk somebody. total javascript novice, so i'm amazed i've gotten far. so when @ code, you'll see glaring problems , laugh @ me, because blindly guessing @ syntax @ point. please see offending code below , enjoy chuckle. i'll wait.

okay, i'm trying make simple calculator displays monthly savings of buying bus pass on paying cash. i'm trying display different answer depending upon zone chosen in select menu. formulas in each if statement work when list variables outside of if statements (hence aforementioned amazement), displaying each answer in series of alert boxes, i'd display applicable answer, , syntax out of whack.

i'd honored , humbled schooled in matter, bearing in mind of course less-than-rudimentary js skills. advance 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>cost savings calculator</title>    <script language="javascript">  <!-- begin ce mp savings calc script function  domath3() { var 1 = eval(document.theform3.elements[0].value) var 2 = eval(document.theform3.elements[1].value) var 3 = eval(document.theform3.elements[3].value)  if(document.theform3.elements[3].value = "z4"){ var prodz4 = (((one  *   two) * 4.25) *12) - 1680 alert("your yearly savings if buy commuter express zone 4 monthly pass $"  +  prodz4  +  ".") }  if(document.theform3.elements[3].value = "z3"){ var prodz3 = (((one  *   two) * 3.75) *12) - 1488 alert("your yearly savings if buy commuter express zone 3 monthly pass $"  +  prodz3  +  ".") }  if(document.theform3.elements[3].value = "z2"){ var prodz2 = (((one  *   two) * 3) *12) - 1200 alert("your yearly savings if buy commuter express zone 2 monthly pass $"  +  prodz2  +  ".") }  if(document.theform3.elements[3].value = "z1"){ var prodz1 = (((one  *   two) * 2.5) *12) - 960 alert("your yearly savings if buy commuter express zone 1 monthly pass $"  +  prodz1  +  ".") }  if(document.theform3.elements[3].value = "base"){ var prodbase = (((one  *   two) * 1.5) *12) - 684 alert("your yearly savings if buy commuter express base monthly pass $"  +  prodbase  +  ".") }  } // end ce mp savings calc script --> </script>    </head>  <body>  <form name="theform3"> days commute monthly: <input type="text"> daily trips on commuter express: <input type="text"> choose zone: <select name="zone"> <option value="base">base</option> <option value="z1">zone 1</option> <option value="z2">zone 2</option> <option value="z3">zone 3</option> <option value="z4">zone 4</option> </select> <input type="button" value="show result" onclick="domath3()">  </form>   </body> </html>

here's 1 way of doing it:

function  domath3() {     var 1 = parseint(document.theform3.elements[0].value);     var 2 = parseint(document.theform3.elements[1].value);     var selection = document.getelementsbyname("zone")[0].value;      if(selection === "z4"){         var prodz4 = (((one  *   two) * 4.25) *12) - 1680;         alert("your yearly savings if buy commuter express zone 4 monthly pass $"  +  prodz4  +  ".");     }     else if(selection === "z3"){         var prodz3 = (((one  *   two) * 3.75) *12) - 1488;         alert("your yearly savings if buy commuter express zone 3 monthly pass $"  +  prodz3  +  ".");     }     else if(selection === "z2"){         var prodz2 = (((one  *   two) * 3) *12) - 1200;         alert("your yearly savings if buy commuter express zone 2 monthly pass $"  +  prodz2  +  ".");     }     else if(selection === "z1"){         var prodz1 = (((one  *   two) * 2.5) *12) - 960;         alert("your yearly savings if buy commuter express zone 1 monthly pass $"  +  prodz1  +  ".");     }     else if(selection === "base"){         var prodbase = (((one  *   two) * 1.5) *12) - 684;         alert("your yearly savings if buy commuter express base monthly pass $"  +  prodbase  +  ".");     } }

fixes:

  1. you're missing ; (semi-colon's) everywhere - might seem 'optional' developer internally, javascript add them automatically leading hard track bugs. put 1 @ end of every statement.

  2. as mentioned elsewhere, don't use eval(), use parseint() integers , parsedouble() floats.

  3. = assignment operator, == , === used check equality. of these two, === should preferred. == perform coercion while === not.

  4. the biggest problem think document.theform3.elements[3].value gets button , not select box. should index 2.

optionally:

  1. you use else ifs since 1 of conditions true @ time. use switch-case instead.

  2. i avoid using indexes elements since might decide change form later , it's going painful make sure update indices correctly. check out getelementsbyid instead. @frits notes in comment below, use syntax document.formname.inputname (i.e. document.theform3.zone.value; form) element more cleanly , safely.

here's a working example.


Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more