javascript - Button, when clicked, reloads the page instead of calling function -
i making calculator game , made button this:
<button onclick="myfunction()">calculate</button> when button clicked, want run 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 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 @ 0/"+ eval(optdura); //alert("minimum cost per battle = "+ eval(mincpb)+ "at 0/"+ eval(optdura)); } </script> here result label want provide final answer. when click button, should run function "myfunction()" doesn't. instead refreshes page , data entered gone. can me why occurring? in advance :)
<!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 above script </script> </body> </html>
by default button submitting form. fix need return false;.
onclick="myfunction(); return false;" 