Button, when clicked, reloads the page instead of calling function

Question

I was making a calculator for a game and made a button like this:

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

When button is clicked, I want to run the following myFunction() script:

<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>

Here result is a label where I want to provide the final answer. When I click the button, it should run the function myFunction() but it doesn't. Instead it refreshes the page and all the data entered is gone. Can you help me why this is occurring?

    <!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>

Where's the rest of your HTML? My guess is you have your button inside of a `
`. Clicking a button inside of a form will submit that form. — Mike Cluck, Jun 01 '16 at 20:40
@MikeC yes the button is in a form. Shouldn't it be there? btw updated the code with html too — dknight, Jun 01 '16 at 20:44
You shouldn't have a form unless you're planning on submitting some data to a server. Just get rid of the form wrapping your code and it should be fine. — Mike Cluck, Jun 01 '16 at 20:45
@MikeC it has html now. So forms are used only for transferring data to a server? Can't they be used in a normal website? — dknight, Jun 01 '16 at 20:52
There's nothing stopping you from using one but there's also no point. It's like bringing a swimsuit into the movie theatre. No one is going to tell you no, but you aren't exactly going to be swimming in there. — Mike Cluck, Jun 01 '16 at 20:54
What? Yes it does. Remove the form and everything works. If you're adamant about keeping the form then add `onsubmit="return false;"` to your form. Returning `false` during a submission will prevent the submission from going through. — Mike Cluck, Jun 01 '16 at 21:03
Do you see any errors in your console? I can see a few problems occurring. — Mike Cluck, Jun 01 '16 at 21:12
@MikeC yes I can also see errors. first one was Unexpected identifiers due to (double), I removed it. Now it is saying function myFunction() is not defined. Can you help in this? — dknight, Jun 01 '16 at 21:36

score 0 · Accepted Answer · answered Jun 01 '16 at 20:48

0

By default the button is submitting the form. To fix it you need to return false;.

onclick="myFunction(); return false;"

answered Jun 01 '16 at 20:48

I wrestled a bear once.

22,983
19
69
116

score 0 · Answer 2 · answered Jun 01 '16 at 20:52

0

Add param e in your function, and the just write e.preventDefault(). More about that.

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

answered Jun 01 '16 at 20:52

Mantas Čekanauskas

2,218
6
23
43

score 0 · Answer 3 · answered Jun 01 '16 at 20:55

0

Change your <button> to some other tag like <div> or <span>. It will not look like a button, but functionally it will do what you want. You can style the div with css to look more like button if you want.

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

answered Jun 01 '16 at 20:55

BoltKey

1,994
1
14
26

I know OP put it in their code but it's worth mentioning that [`` is deprecated.](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html) – Mike Cluck Jun 01 '16 at 20:57

Button, when clicked, reloads the page instead of calling function

3 Answers3