单击按钮后，重新加载页面而不是调用函数

Question

我当时正在为游戏制作计算器，并按下了一个按钮：

<button onclick="myFunction()">Calculate</button>

单击按钮时，我要运行以下myFunction()脚本：

<script>
function myFunction() {
var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura;
var iniCost, repCost;
var smithEffi, smithCharge;
var se, sc;
var totCostTillNow, costPerBattle = 0, minCPB;
var i;
var repCount = 1;
//Assigning the values
currDura=document.getElementById("currDura_").value;
maxDura=document.getElementById("maxDura_").value;
iniCost=document.getElementById("iniCost_").value;
repCost=document.getElementById("repCost_").value;
smithEffi=document.getElementById("smithEffi_").value;
smithCharge=document.getElementById("smithCharge_").value;

se = smithEffi / 100;
sc = smithCharge / 100;
tempMaxDura = maxDura;
tempDura = currDura;
totDura = tempDura;
totCostTillNow = iniCost;
costPerBattle = totCostTillNow / totDura;
minCPB = costPerBattle;

for(i=1; i<=60; i++)
{
    totCostTillNow += (double) repCost * sc;
    tempDura = tempMaxDura * se;
    totDura += tempDura;
    costPerBattle = (double) (totCostTillNow / totDura);
    tempMaxDura -= 1;
    if ( minCPB >=  costPerBattle )
    {
        minCPB = costPerBattle;
        optDura = tempMaxDura;
    }
}
document.getElementById("result").value = eval(minCPB) + " gold at 0/"+ eval(optDura);
//alert("minimum cost per battle = "+ eval(minCPB)+ "at 0/"+ eval(optDura));
}
</script>

这里的结果是我想提供最终答案的标签。 当我单击按钮时，它应运行函数“ myFunction（）”，但不会。 而是刷新页面，所有输入的数据都消失了。 您能帮我为什么会这样吗？ 提前致谢：）

    <!DOCTYPE html>
<html>
<head>
<title>
Cost Per Battle Calculator
</title>
</head>
<style>
.smaller{
    width: 50px;
    padding: 12px 10px;
    margin: 0px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.bigger{
    width: 110px;
    padding: 12px 10px;
    margin: 0px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button{
    width: 110px;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 0px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #badf6f;
    padding:20px;
}
</style>



<body>



<div>
  <form>
    <!-- <label for="fname" id="fn">First Name</label> -->
    <!-- <input type="text" id="fname" name="firstname"> -->
    <!-- <button onclick="myFunction()">Calculate</button> -->
     <table border="0">
        <tr>
             <td>
                <center><img src="http://trial.6te.net/images/gold.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/wood_s.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/ore_s.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center>
            </td>
            <td>
                <center><img src="http://trial.6te.net/images/gems_S.gif"></img></center>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="gold_" name="Gold" class="bigger">
            </td>
            <td>
                <input type="text" id="wood_" name="Wood" class="smaller">
            </td>
            <td>
                <input type="text" id="ore_" name="Ore" class="smaller">
            </td>
            <td>
                <input type="text" id="mercury_" name="Mercury" class="smaller">
            </td>
            <td>
                <input type="text" id="sulphur_" name="Sulphur" class="smaller">
            </td>
            <td>
                <input type="text" id="crystals_" name="Crystals" class="smaller">
            </td>
            <td>
                <input type="text" id="gems_" name="Gems" class="smaller">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="currDura_" name="Current Durability" class="smaller">
            </td>
            <td>
                <input type="text" id="maxDura_" name="Maximum Durability" class="smaller">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="repCost_" name="Repair Cost" class="bigger">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="smithEffi_" name="Smith Efficiency" class="smaller">
            </td>
            <td>
                <input type="text" id="smithCharge_" name="Smith Charge" class="smaller">
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <center><button onclick="myFunction()">Calculate</button></center>
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <label id="result"></label>
            </td>
        </tr>
    </table>
  </form>
</div>
<script>
//Here is the above script
</script>
</body>
</html>

Answer 1

默认情况下，该按钮将提交表单。 要修复它，您需要return false; 。

onclick="myFunction(); return false;"

Answer 2

在函数中添加参数e ，然后只需编写e.preventDefault() 。 更多关于那个。

myFunction(e){
    e.preventDefault();
    //rest of your code
}

Answer 3

将您的<button>更改为其他标签，例如<div>或<span> 。 它看起来不像一个按钮，但是在功能上它将实现您想要的功能。 您可以根据需要使用CSS设置div的样式，使其看起来更像按钮。

<center><span onclick="myFunction()">Calculate</span></center>

单击按钮后，重新加载页面而不是调用函数

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-06-01 20:48:34

解决方案2
0 2016-06-01 20:52:31

解决方案3
0 2016-06-01 20:55:31

单击按钮后，重新加载页面而不是调用函数

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-06-01 20:48:34

解决方案2 0 2016-06-01 20:52:31

解决方案3 0 2016-06-01 20:55:31

解决方案1
0 已采纳 2016-06-01 20:48:34

解决方案2
0 2016-06-01 20:52:31

解决方案3
0 2016-06-01 20:55:31