Input type button does not call the onclick function inline

Question

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

<input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is">

When button is clicked, I want to run the cpbCalc() function.
You can find this html code live on http://trial.6te.net/Calculators/cpbCalculatorNew.html

Here is the complete html Code :

<!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_is{
    width: 110px;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 0px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button_is:hover {
    background-color: #45a049;
}

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

<body>
<div>
    <!-- <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" value="0">
            </td>
            <td>
                <input type="text" id="ore_" name="Ore" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="mercury_" name="Mercury" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="crystals_" name="Crystals" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="gems_" name="Gems" class="smaller" value="0">
            </td>
        </tr>
        <tr>
            <td>
                Durability :<br>
                <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>
                Repair Cost :<br>
                <input type="text" id="repCost_" name="Repair_Cost" class="bigger">
            </td>
        </tr>
        <tr>
            <td>
                Smith Efficiency :<br>
                <input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller">
            </td>
            <td>
                Smith Charges :<br>
                <input type="text" id="smithCharge_" name="Smith_Charge" class="smaller">
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center> 
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <label id="result_"></label>
            </td>
        </tr>
    </table>
</div>

<script language="JavaScript">
<!-- 
function cpbCalc() {
    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("gold_").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 = parseFloat(iniCost);
    costPerBattle = parseFloat(totCostTillNow / totDura);
    minCPB = parseFloat(costPerBattle);
    optDura = parseInt(tempMaxDura);

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

Here "result_" is a label where I want to provide the final answer.
When I click the button, it should run the function "cpbCalc()" but it doesn't.

Instead it does nothing.
Also when I check in Console, it shows no errors. Can you help me why this is occurring and provide a solution for it?

Why do you have an html comment inside of your script block? Using eval is a bad idea. `` is a Deprecated tag. — epascarello, Jun 03 '16 at 12:16

score 0 · Answer 1 · answered Jun 03 '16 at 12:07

You have to replace :

document.getElementById("result_").value = eval(minCPB) + " gold at 0/"+ eval(optDura);

With :

document.getElementById("result_").innerHTML = eval(minCPB) + " gold at 0/"+ eval(optDura);

The tag does't have a "value" attribut. It's why it's not working but you don't have errors.

score 0 · Answer 2 · answered Jun 03 '16 at 12:12

0

you can use

If the value will be retruned or not

answered Jun 03 '16 at 12:12

SMS

84
5

score 0 · Answer 3 · edited May 23 '17 at 10:29

The debugger is your friend.

A couple things:

First, when you read a value from an input box that you want to use as a number in your script, you need to convert it to a number. For example:

currDura = document.getElementById("currDura_").value;

should be:

currDura = parseInt(document.getElementById("currDura_").value);

In production code this also needs to perform error checking (users may enter non-numeric values), but this is fine for testing.

I see that you are parsing some of the values later on in the code, but you're also using some of them before converting to numbers (e.g., `se = smithEffi / 100').

Second, you really should avoid using eval. If you have converted the input values to numbers, this should not be necessary.

Finally, value is not the correct property of the label. My recommendation is to use jQuery and assign the content like so:

$('#result_').text('text to show in label');

You can use the innerHTML property, but I typically don't recommend this because you may need to deal with encoding the text.

You can assign text using pure JavaScript, but it's a bit more involved due to potential cross-browser issues. See Cross-browser innerText for setting values for some examples of how to do this.

score 0 · Accepted Answer · answered Jun 03 '16 at 12:19

There are some typos in your script:

never use eval: it's a threat and mainly you do not need it
to convert text values to numbers a way is to add the + in front of value like +document.getElementById("currDura_").value
avoid division by zero like for totDura. A way can be: (totDura == 0) ? 1 : totDura)
use textContent instead of value property to change the label text

The snippet:

function cpbCalc() {
  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("gold_").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 = parseFloat(iniCost);
  costPerBattle = parseFloat(totCostTillNow / (totDura == 0) ? 1 : totDura); // avoid division by zero
  minCPB = parseFloat(costPerBattle);
  optDura = parseInt(tempMaxDura);

  for(i=1; i<=maxDura; i++)
  {
    totCostTillNow += parseFloat(repCost * sc);
    tempDura = parseInt(tempMaxDura * se);
    totDura += parseInt(tempDura);
    costPerBattle = parseFloat(totCostTillNow / totDura);
    tempMaxDura -= 1;
    if ( minCPB >=  costPerBattle )
    {
      minCPB = parseFloat(costPerBattle);
      optDura = parseInt(tempMaxDura);
    }
  }

  // For labels use textContent instead of value property
  document.getElementById("result_").textContent = minCPB + " gold at 0/"+ optDura; // never use eval
  return 0;
  //alert("minimum cost per battle = " + eval(minCPB) + "at 0/" + eval(optDura));
  //-->
}

.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_is{
  width: 110px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 0px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button_is:hover {
  background-color: #45a049;
}

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

<div>
    <!-- <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" value="0">
            </td>
            <td>
                <input type="text" id="ore_" name="Ore" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="mercury_" name="Mercury" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="sulphur_" name="Sulphur" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="crystals_" name="Crystals" class="smaller" value="0">
            </td>
            <td>
                <input type="text" id="gems_" name="Gems" class="smaller" value="0">
            </td>
        </tr>
        <tr>
            <td>
                Durability :<br>
                <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>
                Repair Cost :<br>
                <input type="text" id="repCost_" name="Repair_Cost" class="bigger">
            </td>
        </tr>
        <tr>
            <td>
                Smith Efficiency :<br>
                <input type="text" id="smithEffi_" name="Smith_Efficiency" class="smaller">
            </td>
            <td>
                Smith Charges :<br>
                <input type="text" id="smithCharge_" name="Smith_Charge" class="smaller">
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <center><input type="button" value="Calculate" name="Calc_Button" onclick="cpbCalc()" class="button_is"></center>
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <label id="result_"></label>
            </td>
        </tr>
    </table>
</div>

Input type button does not call the onclick function inline

4 Answers4