我有一个小问题。
我正在学习Javascript而且我决定制作一个货币转换器但是，在显示数据后我的页面会不断刷新。
有谁可以帮我弄清楚为什么这样做？感谢
网站：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 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>
答案 0 :(得分：8)
如果按钮位于表单内，则按钮的默认行为就像提交按钮一样。如果你添加type ='button'，它就会像提交按钮一样停止行动
<button onclick="output_value()" type="button" id="submit_button">
您也可以从处理程序返回false（就像使用<input type="submit">一样）以防止默认行为。
<button onclick="output_value(); return false" id="submit_button">
并不是说你真的不需要这里的表格，因为你没有提交。删除表单也可以解决您的问题。
答案 1 :(得分：2)
这不是解决问题的真正答案，但我只是想重构这个功能。
/* 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];
}
它实际上可能是一个单行，因为每个变量只使用一次，但这可能更具可读性。
答案 2 :(得分：0)
表单正在提交，因此页面会在此之后刷新。修复是将您的监听器放在表单上并让提交处理程序调用它，然后返回false以便表单不提交。这样，如果javascript被禁用，不可用或无法成功运行，表单提交，您可以在服务器上进行转换。
一种常见的策略是使表单在没有任何脚本的情况下正常运行，然后添加脚本以尽可能避免服务器调用。为此，您需要将名称属性添加到表单控件或将ID属性更改为name属性。
表单中的按钮默认为提交类型。
要“刷新页面”，您只需调用表单的重置方法，就可以从其提交处理程序传递对表单的引用，这样：
e.g。在HTML中：
<form name="convertions" onsubmit="return output_value(this)">
...
<button>Submit</button>
并在函数中：
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;
}