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>

这里的结果是一个标签，我想提供最终答案。当我点击按钮时，它应该运行函数＆＃34; myFunction（）＆＃34;但它并没有。相反，它刷新页面，所有输入的数据都消失了。你能帮我解释为什么会这样吗？在此先感谢：）

    <!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()。有关that的更多信息。

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

Answer 3

将您的<button>更改为其他标记，例如<div>或<span>。它看起来不像一个按钮，但功能上它会做你想要的。如果你愿意的话，你可以用css设置div的样式，看起来更像是按钮。

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

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

3 个答案: