admin管理员组文章数量:1415064
i have a small problem.
I'm learning Javascript and I decided to make a currency converter but, my page keeps refreshing after the data is being displayed.
Could anyone help me figure out why it's acting this way? Thanks
website : .html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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 the 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 the 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 the 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 the 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 the same currency.");
}
}else{
alert("Fatal Error, refresh the 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>
i have a small problem.
I'm learning Javascript and I decided to make a currency converter but, my page keeps refreshing after the data is being displayed.
Could anyone help me figure out why it's acting this way? Thanks
website : http://nonlocalhost.uphero./index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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 the 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 the 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 the 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 the 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 the same currency.");
}
}else{
alert("Fatal Error, refresh the 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>
- 1 I understand that you're a beginner, but a handy tip is that whenever you copy/paste a line of code, chances are you're doing it wrong, and there's a lot of copy/paste happening there. – nickf Commented Sep 12, 2012 at 22:52
-
Just to follow up on nickf's ment. Your gigantic if/else does not need to set the value of the input. It should only be done after you figure out what the conversion rate is, which is all your big if/else should be doing. Then at the end you'd just call
document.getElementsByName("convertion_output")[0].value = my_input * rate– Ruan Mendes Commented Sep 12, 2012 at 22:59 - Yep -- see my answer below for a shorter version. – nickf Commented Sep 12, 2012 at 23:03
3 Answers
Reset to default 10The default behavior of button is act like a submit button if it's inside a form. If you add type='button', it stops acting like a submit button
<button onclick="output_value()" type="button" id="submit_button">
You can also just return false from the handler (like you could with <input type="submit">) to prevent the default behavior.
<button onclick="output_value(); return false" id="submit_button">
Not that you don't really need a form here, since you're not submitting it. Removing the form also fixes your problem.
See How to prevent buttons from submitting forms
This isn't really an answer that solves your problem, but I just wanted to refactor that function.
/* USD to... */
var rates = {
USD: 1,
CAD: 0.975,
EUR: 0.775,
GBP: 0.620,
AUD: 0.956
};
function output_value() {
var my_input = parseFloat(document.getElementsByName("user_input")[0].value);
var my_currency = document.convertions.currency_to_convert.value;
var convert_to = document.convertions.convert_currency_to.value;
var output = document.getElementsByName('convertion_output')[0];
// side note. "conversion" is spelt with an 's' not a t.
output.value = my_input / rates[my_currency] * rates[convert_to];
}
It could actually be a one-liner, since each of those variables are only used once, but this is probably more readable.
The form is being submitted, so the page refreshes after that. The fix is to put your listener on the form and have the submit handler call it, then return false so that the form doesn't submit. That way if javascript is disabled, not available or fails to run successfully, the form submits and you can do the conversion at the server.
A mon strategy is to have a form that functions correctly without any script, then add scripting to avoid server calls where possible. To do that, you need to either add name attributes to the form controls or change the ID attributes to name attributes.
Buttons in a form are type submit by default.
To "refresh the page" you can just call the form's reset method, and you can pass a reference to the form from its submit handler so:
e.g. in the HTML:
<form name="convertions" onsubmit="return output_value(this)">
...
<button>Submit</button>
and in the function:
function output_value(form) {
// var my_currency = document.convertions.currency_to_convert.value;
var my_currency = form.currency_to_convert.value;
// and so on
...
alert("Fatal Error, refresh the page.");
// reset the form
form.reset();
// stop the form submitting
return false;
}
本文标签： htmlJavascriptpage keeps refreshing after outputting resultsStack Overflow
版权声明：本文标题：html - Javascript, page keeps refreshing after outputting results - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740857893a2297192.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论