html - Javascript, page keeps refreshing after outputting results -
i have small problem.
i'm learning javascript , decided make currency converter but, page keeps refreshing after data being displayed.
could me figure out why it's acting way? thanks
website : http://nonlocalhost.uphero.com/index.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> <style type="text/css"> * {font-size:13px;font-family:arial;background-color:black;color:white;padding:0;margin:0;} #wrapper {width:640px;margin:0px auto;} input {color:lime;width:150px;height:22px;} #money_to_convert, label:nth-child(3) {position:relative;top:100px;right:95px;} #my_currency {width:53px;height:22px;position:relative;top:100px;left:232px;} #converted_input, label:nth-child(5) {position:relative;top:134px;right:298px;} #convert_currency {width:53px;height:22px;position:relative;top:134px;left:175px;} #submit_button {width:52px;height:25px;position:relative;top:117px;right:230px;} </style> <script type="text/javascript"> function output_value() { var my_input = number(document.getelementsbyname("user_input")[0].value); var my_output; var my_currency = document.convertions.currency_to_convert.value; var convert_to = document.convertions.convert_currency_to.value; if(my_currency == "usd"){ if(convert_to == "cad"){ my_output = my_input * 0.975; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "eur"){ my_output = my_input * 0.775; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "gbp"){ my_output = my_input * 0.620; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "aud"){ my_output = my_input * 0.956; document.getelementsbyname("convertion_output")[0].value = my_output; }else{ alert("you can't convert same currency."); } }else if(my_currency == "cad"){ if(convert_to == "usd"){ my_output = my_input * 1.025; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "eur"){ my_output = my_input * 0.795; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "gbp"){ my_output = my_input * 0.636; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "aud"){ my_output = my_input * 0.980; document.getelementsbyname("convertion_output")[0].value = my_output; }else{ alert("you can't convert same currency."); } }else if(my_currency == "eur"){ if(convert_to == "usd"){ my_output = my_input * 1.289; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "cad"){ my_output = my_input * 1.257; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "gbp"){ my_output = my_input * 0.800; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "aud"){ my_output = my_input * 1.233; document.getelementsbyname("convertion_output")[0].value = my_output; }else{ alert("you can't convert same currency."); } }else if(my_currency == "gbp"){ if(convert_to == "usd"){ my_output = my_input * 1.610; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "eur"){ my_output = my_input * 1.249; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "cad"){ my_output = my_input * 1.571; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "aud"){ my_output = my_input * 1.541; document.getelementsbyname("convertion_output")[0].value = my_output; }else{ alert("you can't convert same currency."); } }else if(my_currency == "aud"){ if(convert_to == "usd"){ my_output = my_input * 1.045; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "eur"){ my_output = my_input * 0.810; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "gbp"){ my_output = my_input * 0.648; document.getelementsbyname("convertion_output")[0].value = my_output; }else if(convert_to == "cad"){ my_output = my_input * 1.019; document.getelementsbyname("convertion_output")[0].value = my_output; }else{ alert("you can't convert same currency."); } }else{ alert("fatal error, refresh page."); } } </script> </head> <body> <div id="wrapper"> <form name="convertions"> <select name="currency_to_convert" id="my_currency"> <option value="usd" selected>usd</option> <option value="cad">cad</option> <option value="eur">eur</option> <option value="gbp">gbp</option> <option value="aud">aud</option> </select> <select name="convert_currency_to" id="convert_currency"> <option value="usd">usd</option> <option value="cad" selected>cad</option> <option value="eur">eur</option> <option value="gbp">gbp</option> <option value="aud">aud</option> </select> <label for="user_input">amount:</label> <input type="text" name="user_input" id="money_to_convert" /> <label for="convertion_output">result:</label> <input type="text" name="convertion_output" id="converted_input" disabled="disabled" /> <button onclick="output_value()" id="submit_button">submit</button> </form> </div> </body> </html>
the default behavior of button act submit button if it's inside form. if add type='button', stops acting submit button
<button onclick="output_value()" type="button" id="submit_button"> you can return false handler (like <input type="submit">) prevent default behavior.
<button onclick="output_value(); return false" id="submit_button"> not don't need form here, since you're not submitting it. removing form fixes problem.
Comments
Post a Comment