输入类型按钮不会内联调用onclick函数

时间：2016-06-03 11:59:38

标签： javascript html

我正在为游戏制作一个计算器并按下这样的按钮：

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

单击按钮时，我想运行cpbCalc()功能 您可以在http://trial.6te.net/Calculators/cpbCalculatorNew.html

上找到此html代码

这是完整的HTML代码：

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

这里“result_”是我想提供最终答案的标签 当我单击按钮时，它应该运行“cpbCalc()”函数，但它不会。

相反它什么都不做。
当我在Check中检查时，它没有显示任何错误。 你能帮助我为什么会这样，并为它提供解决方案吗？

4 个答案:

答案 0 :(得分：0)

你必须替换：

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

使用：

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

标签没有“值”属性。这就是为什么它没有用，但你没有错误。

答案 1 :(得分：0)

你可以使用

如果该值将被重新启动

答案 2 :(得分：0)

调试器是你的朋友。

一些事情：

首先，当您从输入框中读取要在脚本中用作数字的值时，需要将其转换为数字。例如：

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

应该是：

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

在生产代码中，这还需要执行错误检查（用户可能输入非数字值），但这适用于测试。

我看到你在代码中解析了一些值，但是在转换为数字之前你也使用了其中一些值（例如，`se = smithEffi / 100'）。

其次，你真的应该避免使用eval。如果您已将输入值转换为数字，则不需要这样做。

最后，value不是标签的正确属性。我的建议是使用jQuery并分配如下内容：

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

您可以使用innerHTML属性，但我通常不建议这样做，因为您可能需要处理文本编码。

您可以使用纯JavaScript分配文本，但由于潜在的跨浏览器问题，它会更加复杂。有关如何执行此操作的一些示例，请参阅Cross-browser innerText for setting values。

答案 3 :(得分：0)

你的剧本中有一些拼写错误：

  • 从不使用eval：这是一种威胁，主要是你不需要它
  • 将文本值转换为数字的方法是在值前面添加+ 喜欢+ document.getElementById（“currDura _”）。value
  • 避免像totDura一样被零除。一种方法可以是：（totDura == 0）？ 1：totDura）
  • 使用textContent代替value属性来更改标签文本

摘录：

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>

相关问题
最新问题