Javascript,输出结果后页面不断刷新
Javascript, page keeps refreshing after outputting results
我有一个小问题。
我正在学习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>
按钮的默认行为是,如果它在表单中,则表现得像提交按钮。如果添加type="button",则它将停止表现得像一个提交按钮
<button onclick="output_value()" type="button" id="submit_button">
您也可以从处理程序返回false(就像使用<input type="submit">
一样),以防止默认行为。
<button onclick="output_value(); return false" id="submit_button">
这并不是说你真的不需要表单,因为你没有提交表单。删除表单也可以解决你的问题。
请参阅如何阻止按钮提交表单
这并不是真正解决问题的答案,但我只是想重构那个函数。
/* 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];
}
它实际上可以是一个单行,因为每个变量只使用一次,但这可能更可读。
表单正在提交中,因此之后页面将刷新。修复方法是将侦听器放在表单上,并让提交处理程序调用它,然后返回false,这样表单就不会提交。这样,如果javascript被禁用、不可用或无法成功运行,表单就会提交,您可以在服务器上进行转换。
一种常见的策略是让表单在没有任何脚本的情况下正常工作,然后添加脚本以尽可能避免服务器调用。为此,您需要向表单控件添加名称属性,或者将ID属性更改为名称属性。
表单中的按钮默认为提交类型。
要"刷新页面",只需调用表单的重置方法,就可以从表单的提交处理程序传递对表单的引用,因此:
例如在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;
}
相关文章:
- 强制模板刷新ember.js
- 如何通过ajax刷新JSF填充的javascript变量
- 在JavaScript中输出转义字符
- 如何在jQuery中将函数的输出分配给变量
- 如何解决Yii中的页面刷新问题
- Jquery提交表单而不刷新
- 刷新页面后会出现警报
- 刷新后保留对网页的更改
- 如何在不刷新页面的情况下更新显示框
- 重定向时角度刷新浏览器
- Javascript,输出结果后页面不断刷新
- Node.js、Express、EJS-刷新变量以在页面上输出
- 刷新文本框输出
- 刷新 php 输出而不重新加载页面
- 可以't让localStorage在刷新时显示输出
- 如何在不刷新、显示输出、重新加载表单、冲洗和重复的情况下提交表单
- 莫名其妙的页面刷新在套接字后被触发.输入输出消息
- 不断刷新/接收输出
- 提交表单而不刷新页面并将输出加载到html中
- 如何在不刷新或刷新的情况下更改innerHTML,并使用javascript中的相同按钮进行输出