Javascript，页面在输出结果后不断刷新 [英] Javascript, page keeps refreshing after outputting results
本文介绍了Javascript，页面在输出结果后不断刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个小问题。
我在学习Javascript，我决定做一个货币转换器，但是我的页面在数据显示后不断刷新。
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
网站： 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>
推荐答案
按钮的默认行为类似于提交按钮如果它在一个表单内。如果您添加type ='button'，它将停止表现为提交按钮
The 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">
你也可以从处理程序返回false（就像你可以使用< ; input type =submit> ）以防止默认行为。
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.
请参阅如何防止按钮提交表单
这篇关于Javascript，页面在输出结果后不断刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
