Javascript，输出结果后页面不断刷新答案

【问题标题】：Javascript, page keeps refreshing after outputting resultsJavascript，输出结果后页面不断刷新
【发布时间】：2012-09-06 00:03:47
【问题描述】：

我有一个小问题。

我正在学习 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>

【问题讨论】：

我知道你是一个初学者，但一个方便的提示是，每当你复制/粘贴一行代码时，你很可能做错了，而且有很多 /i> 那里发生的复制/粘贴。
只是为了跟进 nickf 的评论。你巨大的 if/else 不需要设置输入的值。只有在你弄清楚转化率是多少之后才应该这样做，这就是你的 if/else 应该做的所有事情。然后最后你只需打电话给document.getElementsByName("convertion_output")[0].value = my_input * rate
是的 - 请参阅下面的答案以获得更短的版本。

标签： javascript html css forms

【解决方案1】：

如果按钮位于表单内，则按钮的默认行为类似于提交按钮。如果你添加 type='button'，它就不再像提交按钮一样了

<button onclick="output_value()" type="button" id="submit_button">

您也可以只从处理程序返回 false（就像使用 <input type="submit"> 一样）以防止默认行为。

<button onclick="output_value(); return false" id="submit_button">

并不是说您在这里真的不需要表格，因为您没有提交它。删除表单也可以解决您的问题。

见How to prevent buttons from submitting forms

【讨论】：

【解决方案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];
}

它实际上可以是单行的，因为这些变量中的每一个都只使用一次，但这可能更具可读性。

【讨论】：

【解决方案3】：

表单正在提交，因此页面会在此之后刷新。解决方法是将您的侦听器放在表单上并让提交处理程序调用它，然后返回 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;
}

【讨论】：