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? Thanks 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 is the above script
</script>
</body>
</html>
3 answers
solution1
0 ACCPTED 2016-06-01 20:48:34
By default the button is submitting the form. To fix it you need to return false; .
onclick="myFunction(); return false;"
solution2
0 2016-06-01 20:52:31
Add param e in your function, and the just write e.preventDefault() . More about that .
myFunction(e){
e.preventDefault();
//rest of your code
}
solution3
0 2016-06-01 20:55:31
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Page Reloads when Button is clicked on Modal
Dynamic form submit reloads the page instead of calling ngSubmit function
Click a button when the page reloads
Appended button not calling function when clicked
Calling Javascript function when button clicked
Calling a JavaScript function when a button is clicked in HTML
ASP.NET Button with no code reloads page in a new window when clicked
Ajax form reloads the page instead of calling the ajax code
IE Always Reloads Entire Page when <a href=“#” /> is Clicked
calling the same function when any radio button or checkbox are clicked
Related Tags